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What's in this package System requirements 

The Fireworks package contains: Fireworks runs on either the Windows or Macintosh 

A . . , t- i • ,, operating systems. Before you install Fireworks, you 

♦ A CD-ROM containing the Fireworks installer 1 i , ° £ ,, • J 

, . , , & need the following equipment: 

and the sample artwork. D 1 1 

♦ Using Fireworks , the manual you are now reading. Wind O WS 

♦ Windows 95 or Windows NT 4 (with Service 
Pack 3) or later 

♦ Intel Pentium 120 MHz processor required 
(Pentium 166 MHz with MMX recommended) 

♦ 32 MB of system RAM on Windows 95 (40 MB 
or more recommended for Windows NT) 

♦ 60 MB of available hard disk space (100 MB or 
more recommended) 

♦ CD-ROM drive 

♦ Mouse or digitizing tablet 

♦ 640x480 resolution, 256-color monitor required 
(1024x768 resolution, millions of colors 
recommended) 



Macintosh 

♦ System Z 5.5 or higher 

♦ Adobe Type Manager 4 or higher to use Type 1 
fonts 

♦ Power Macintosh processor required (Power 
Macintosh 604/120 MHz or greater, 603e/180 
MHz or greater, or G3 recommended) 

♦ 24MB of application RAM with virtual memory 
on (32 MB or more with virtual memory off 
recommended) 

♦ 60 MB of available hard disk space (100 MB or 
more recommended) 

♦ CD-ROM drive 

♦ Mouse or digitizing tablet 

♦ 640x480 resolution, 256-color monitor required 
(1024x768 resolution, millions of colors 
recommended) 
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Installing and starting 
Fireworks 

Before installing Fireworks, make sure your computer 
meets the system requirements listed m “System 
requirements” on page 2. Read the ReadMe document 
on the Fireworks CD-ROM for late-breakmg 
information. 

To install and start Fireworks on Windows NT 4 or 
Windows 95: 

1 Insert the Fireworks CD-ROM in your CD-ROM 
drive. 

2 Follow the instructions that appear on screen. 

The installer application prompts you to enter 
required information. 

3 When Fireworks is installed, launch Fireworks 
from the Start menu. 

Windows NT 4 and Windows 95 have four alternative 
ways to install Fireworks: 

♦ Double-click the installation application Setup.exe. 

♦ Click the Install button m the Add/Remove 
Programs module m the Control Panel and 
navigate to the Setup.exe application m the 
Fireworks folder. 

♦ Use the Run command m the Start menu and 
navigate to the Setup.exe application m the 
Fireworks folder. 

♦ Select the CD-ROM icon m the Windows 
Explorer or My Computer, right-click to display the 
menu, and choose AutoPlay. 

Note: To disable AutoPlay, hold down the Shift key 
while inserting the Fireworks CD-ROM. 



To install and start Fireworks on a Macintosh: 

1 Disable virus-protection extensions and restart 
your computer. 

2 Insert the Fireworks CD-ROM in your CD- 
ROM drive. 

3 Double-click to launch the Fireworks Installer. 

4 Follow the instructions that appear on screen. 

5 Double-click the Fireworks icon to launch 
Fireworks from the Finder. 

Uninstalling Fireworks 

Use the uninstaller to ensure that all Fireworks files are 
removed from the computer. 

To uninstall Fireworks on Windows NT 4 or 
Windows 95: 

1 Choose Start > Settings > Control Panel. 

2 Double-click Add/Remove Programs. 

3 Select Macromedia Fireworks in the list box. 

4 Click the Add/Remove button. 

5 Follow the instructions that appear on screen. 

The uninstaller removes all Fireworks program files 
from your system. 

On Windows, manual uninstallation may leave several 
DLLs and registry database entries. 

To uninstall Fireworks on the Macintosh: 

1 Run the installer from the Fireworks CD-ROM and 
choose Remove from the Options pop-up. 

2 Follow the instructions that appear on screen. 

The uninstaller removes all Fireworks application 
files from your computer. 

On the Macintosh, manually removing Fireworks can 
leave several preference files m the System folder. 

If you used Custom installation to install Fireworks m a 
different folder than the default location, you must 
specify the same location when uninstalling. 
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Resources for learning 
Fireworks 

Use these resources to learn Fireworks quickly: 

♦ Fireworks Help 

Fireworks Help, available whenever the Fireworks 
application is active, includes information on every 
Fireworks tool, panel, dialog box, and preference. 

♦ Using Fireworks manual 

The Using Fireworks manual includes tutorials and 
chapters covering basic and advanced Fireworks 
features. 

♦ www.macromedia.com 

Macromedia’s award-wmnmg web site contains 
Fireworks tutorials, sample art, and updates. 



What's unique about 
Fireworks? 

The premier production tool for creating web graphics, 
Fireworks has features that can save hours by 
simplifying the web-graphic creation workflow. 
Fireworks was created from the ground up specifically 
for the web. 

Live effects — Create drop shadows, bevels, glows, and 
embosses that are fully editable. Watch them update 
automatically! 

Vector tool flexibility with an organic bitmap 
look — Bezier paths and shapes have bitmap brush 
strokes and textured fills. Apply customizable Live 
Effects to objects. 

Total text control — At last, the precise text control of 
an illustration tool m an image-editing application. 
Control kerning, leading, text effects, alignment, and 
more. Apply Live Effects to text, and best of all, text is 
always editable, all the time. Change text after applying a 
Live Effect and watch the effect update automatically. 

Export preview — Directly view the graphic after each 
adjustment of export settings without switching to your 
web browser. Compare up to four alternative files 
simultaneously to choose the best mix of quality and 
file-size reduction. 

Export optimization — Simplify file format, palette 
settings, dithering, and more to optimize your web 
graphics. Or use the Export Wizard to optimize 
automatically. 

Batch processing — Save your optimization and export 
settings and use them to batch process an entire folder of 
images. 

Image maps — Create editable, color-coded hotspots on 
an overlay above the image. Enter a URL link and 
browser status bar message for each hotspot. 

JavaScript rollovers — Automatically generate code for 
interactive buttons and other graphics. 

Slice images — Slice images on export. Automatically 
generate HTML table code to reassemble images and 
add links. 
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Welcome to Fireworks 

What is Fireworks? 

Fireworks creates the smallest, highest-quality JPEG 
and GIF graphics m the fewest number of steps. It is a 
total solution for creating and producing web graphics. 
Fireworks simplifies and streamlines the process of 
making web and screen graphics, while providing the 
ultimate m flexibility and editability. 

Fireworks also makes it easy to minimize file size 
without sacrificing quality, which results m faster web 
sites and higher satisfaction among web site visitors. 

Without Fireworks, for example, a web designer creates 
an image m a vector-based drawing program such as 
FreeHand, then imports the vector art into a bitmap 
graphics program to rasterize and apply filters. 

Continuing the creative process, the designer exports the 
graphic for import into a color palette-conversion utility 
and then optimizes the palette and image format for 
either web- or screen-based delivery. The designer might 
also use an animation tool or image map utility to create 
a dynamic image. 

To test the graphic, the designer must view it m a web 
browser application. Revising the graphic at this point 
may force the designer to start from the beginning and 
repeat every step. 

With Fireworks, the designers creativity is no longer 
complicated by switching from tool to tool, and 
valuable time is saved by avoiding repetitive procedures. 
Fireworks is a single tool that performs all the 
necessary steps. 

By creating editable paths with bitmap attributes, 
Fireworks ensures that your work is fully editable 
throughout every stage of the design process. Fireworks’ 
powerful export preview capabilities integrated with 
color palette and graphic formatting offer the designer 
control over exporting. 



Fireworks is a solution to the challenges faced by web 
designers. Accordingly, Fireworks is not optimal for 
creating or modifying images intended for traditional 
commercial printing. The Fireworks environment is 
based on the RGB color model, ideally suited for images 
rendered at screen, rather than print, resolutions. 

The advantages to using Fireworks over other tools 
include efficiency, convenience, and adaptability. With 
Fireworks, the designer is free to focus on design and 
creation without the distraction of switching from tool 
to tool. 

This efficient workflow is even more convenient with 
Fireworks’ incredible power over color palettes and file 
formats. Advanced preview capabilities allow the 
designer to see the effect of palette and color depth 
changes without the time-consuming step of viewing 
graphics m a browser. 

Amazingly, both text and objects m a Fireworks graphic 
are fully editable at any time. This means that graphics 
can be easily modified without recreating them. 
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Using the document 
window 

Fireworks is both a vector graphics and a bitmap 
graphics application. Vector objects are composed of 
paths, and bitmap objects are composed of individual 
pixels. Fireworks combines the organic look of bitmap 
objects with the flexibility, control, and editability of 
Bezier paths. 



Launching Fireworks displays the document window, 
your interface to the illustration. A Fireworks canvas 
can be up to 6000 pixels wide by 6000 pixels tall. Move 
and resize the panels, Toolbox, and toolbars to customize 
your environment. 



Main toolbar (Windows only) 

URLs toolbar Opacity toolbar 
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View Controls toolbar (Windows only) 
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Modify toolbar (Windows only) Swatches 



Fireworks on Windows 
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Using the toolbars 

Fireworks has several toolbars: 

♦ Toolbox 

♦ Mam toolbar (Windows only) 

♦ Info bar 

♦ Modify toolbar (Windows only) 

♦ Opacity toolbar 

♦ Status bar (Windows only) 

♦ Swatches 

♦ URLs toolbar 

♦ View Controls toolbar (Windows only) 

Each toolbar is moveable. On Windows, each toolbar is 
dockable. This chapter describes the default location and 
configuration of the toolbars. 

Note: On Macintosh, use the menu to duplicate 
functions found on the Windows Main toolbar and 
Modify toolbar. 

To show or hide individual toolbars, choose Window > 
Toolbars and choose a toolbar. To show or hide the 
Toolbox, choose Window > Toolbox. 



Toolbox 

The Toolbox contains 32 tools, some of which are 
contained m tool groups, as shown. To display a tool 
group, press and hold any tool showing a triangle m the 
lower-right corner. 
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Press and bold a tool to reveal tool groups 



Click an alternate tool to choose it from the tool group. 

On both Macintosh and Windows, pressing letter keys 
switches quickly between tools. Press the letter key 
shown m the following chart to choose a tool. 

Fireworks operates m either object mode or image edit 
mode. Object mode is the default mode, where vector 
graphic creation and some image manipulation occurs. 
Image edit mode is where pixel editing occurs within an 
image object or the background image, which is a 
permanent image m any Fireworks document. 
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Activate by 
pressing 



Some tools only work in object mode and others only 
work m image edit mode. Still others change function 
depending on the current mode. For a discussion of how 
tools function m these modes, see “Fireworks drawing 
and editing tools” on page 56. 



Use this tool To Activate by 

pressing 







Select and drag 
objects. 








V 

or 

0 (zero) 


Pointer 








Select objects behind 
other objects. 




ft. 




V 

or 

0 (zero) 


Select 

Behind 








Discard portions of an 
image. 








c 


Crop 




Export a portion of 
your document. 




[GS> 




j 


Export Area 










Select an object within 
a group or points on a 
path. 


a or 1 






Subselection 








Select a rectangular 
pixel area in image edit 
mode. 


m 


. - - 
- - 1 j 




Marquee 










Select an elliptical pixel 
area in image edit 
mode. 


m 


'"-"j 




Ellipse 

Marquee 










Select a freeform pixel 
area in image edit 
mode. 


i 


e 




l 


Lasso 









Use this tool To 



Select a polygonal pixel I 

area in image edit 
mode. 

Polygon 

Lasso 

Select pixel areas of w 

similar color in image 
edit mode. 

Magic Wand 





Hand 




Magnify 



1 / 

Line 



Pan the view of the spacebar 

document. or 

h 



Change view z 

magnification. 



Draw straight lines. n 






Draw paths by 
anchoring points. 



P 



Draw rectangles, r 

rounded rectangles, 
and squares. 

Rectangle 




[QJ 

Ellipse 



IQJ 

Polygon 



A 

Text 



Draw ellipses and 
circles. 



Draw polygons and 
stars. 



Create text blocks. 



r 



9 



t 



8 Chapter 1 





















Use this tool To 


Activate by 
pressing 


Use this tool 


To 


Activate by 
pressing 




Draw one-pixel pencil 
strokes. 








Sample a color and 
apply it to the active 
color well. 




✓ 


y 






i 


Pencil 


Draw brush strokes 
using Brush panel 
settings. 


b 


Eyedropper 


Fill objects with color, 
gradients, or patterns 
and adjust fills with 


k 


/. 


fS> 




Brush 




Paint Bucket 


Paint Bucket handles. 






Redraw portions of a 
selected path using 
Brush panel settings. 


b 






Remove or replace 
portions of image 
objects and cut paths. 






O 




e 


Redraw Path 




Eraser 




Clone portions of an 
image object. 




i * 


Kesize ana rotate 
objects. 


q 


<8 




s 


Scale 


Slant and rotate 
objects, and change 
perspective. 




Rubber 

Stamp 








q 










Skew 












Distort and rotate 
objects. 


uJ A 


q 











Distort 






Freeform 



Pull a path segment or 
push a path segment 
using a resizable 
cursor. 



% 



Reshape 

Area 



Reshape a selected 
path within the area of 
the resizable cursor. 



Path 

Scrubber (+) 



Increase stroke 
characteristics 
controlled by pressure 
or speed. 



Decrease stroke 
characteristics 
controlled by pressure 
Path or speed. 

Scrubber (-) 




u 
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Main toolbar (Windows only) 



Use To 



Use To 



_D 

New 



Create a new document. 



[* 

Open 



y 

Save 



Open an existing document. 



Save the active document. 



LBJ 

Import 



[BJ 

Export 




Print 



Import a file. 



Export a file. 



Print the active document. 



Undo 



Undo the last action. 






Redo 



Redo the last action. 




Cut 



Cut the selected object to the 
Clipboard. 




Paste the Clipboard's contents into 
the active document. 



Paste 




Object 

Properties 



View Object Properties for the 
selected object. 




Open the Color Mixer. 



Color Mixer 



Brushes 



Open the Brushes panel. 



Fills 



Open the Fill panel. 




Layers 






Open the Layers panel. 



Activate the Help cursor. 



ToolTips name or describe each button’s function as well 
as other user-interface features throughout Fireworks. 
Pause the cursor over a button on a toolbar to display a 
small label, which disappears when you move the cursor 
away from the item. 




Copy 



Copy the selected object to the 
Clipboard. 
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Info bar 




Options for choosing a color model 
and document unit of measurement 



Color of pixel beneath cursor 

Alpha opacity measured in increments 
from 0 to 255 

Cursor position 



Position of bounding box's upper-left 
corner point 

Dimensions of selected object 



The Info bar provides feedback for selected objects, 
depending on object type and current action. Feedback 
includes the color of the pixel beneath the cursor m the 
current color model values, the position of the cursor, 
the location of the selected objects bounding box, and 
the selected object’s dimensions. Choose Window > 
Toolbars > Info to show or hide the Info bar. 

The Info bar’s Options pop-up contains settings for 
your document’s color model and unit of measurement. 



Modify toolbar (Windows only) 

The Modify toolbar contains buttons for frequently 
used modifications. All commands m the Modify 
toolbar are available m the Modify menu. 



Use To 



tltf 



Group 



Group selected objects. 




Ungroup 



Ungroup selected objects. 



Join 



Join selected objects. 



*3 

Split 




Bring to 
Front 



Split selected objects. 



Bring selected objects to front. 




Bring 

Forward 



Bring selected objects forward. 



[1 



Send 

Backward 



Send selected objects backward. 




Send selected objects to back. 



Send to Back 




Align 



Align selected objects according to 
the setting in the adjacent pop-up. 
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Opacity toolbar 



Use To 




Rotate 
90° CCW 



Rotate selected objects 90 degrees 
counterclockwise. 




Rotate 
90° CW 



Rotate selected objects 90 degrees 
clockwise. 



Ai. 



Flip 

Horizontal 



Flip selected objects horizontally. 



pr 



j-i » — 'I *ij| 



71 



Set opacity. Choose 
blending 
mode. 



View object status 
information 
(Macintosh only). 



Use the Opacity toolbar to set opacity and choose a 
blending mode. On the Macintosh, the right side of the 
toolbar contains status information for selected objects. 
On Windows, this status information is located m the 
lower-left corner of the document window. For more 
information on opacity and blending modes, see 
“Compositing” on page 84 and Fireworks Help. 




Flip Vertical 



Flip selected objects vertically. 



For more information about the Modify toolbar and 
about transforming objects, see Fireworks Help. 



To 



Do this 



Set the opacity of a 
single object 

Apply the same opacity 
changes to multiple 
objects 



Return individual 
objects to the previous 
opacity before 
grouping 



Set the value using the 
opacity slider. 

Group the objects and 
alter the group's 
opacity using the 
opacity slider. 

Ungroup the objects. 



Set the blending mode 
of a single object 

Apply the same 
blending mode to 
multiple objects 



Return individual 
objects to the previous 
blending mode before 
grouping 



Choose from the 
blending mode pop-up. 

Group the objects and 
alter the group's 
blending mode using 
the blending mode 
pop-up. 

Ungroup the objects. 
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URLs toolbar 



Show or hide the URL overlay. 

Choose URL viewing options. 

Select, move, and resize URL objects. 

Create URL shapes. 

Create, edit, duplicate, and remove 
links. Choose image map options. 



2 ilT~alDl>j|g 






Assign URLs to selected URL objects. 
Create rectangular slice objects. 



URL stands for Uniform Resource Locator, which is an 
address of a specific page or file on the Internet. Use the 
URLs toolbar to attach URL hotspots to objects. These 
hotspots link an object to a particular URL and are 
retained m an image map when your image is exported. 

Use the URLs toolbars Slice tool to define parts of the 
image that are exported as individual files. For more 
information on slicing images upon export, see “Slicing 
images when exporting” on page 110. 

Create URL objects using one of these methods: 

♦ Use the URL drawing tools to create a shape. 

♦ Select an object and choose Select > Copy to URL. 

Use the URLs toolbar Options pop-up to open the 
Object Properties dialog box and modify the URL 
object shape and linked URL. 



Choosing Image Map Options from the Options pop- 
up opens the Image Map Options dialog box. Choose 
Map Type, Background URL, and enter an Alternate 
Image Description, which is a text message that appears 
m a web browser when an image fails to load. 



Use 


To 


Show/Hide 

URLs 


Make the URL overlay visible. 
Objects outside this layer become 
unselectable. 


URL Pointer 
tool 


Move and reshape URL and slice 
objects. 


URL shape tools 


Create URL objects of various 
shapes. 


Slice tool 


Define parts of the image that are 
exported as individual files 


Link pop-up 


Assign a URL link to an object. 


Options pop-up 


Create, edit, duplicate, and delete 
links. Open the Image Map 
Options dialog box or the Object 
Properties dialog box. View and 
modify an object's URL link and 
shape. 


Image Map 
Options dialog 
box 


Choose a Map Type and 
Background URL, and enter an 
Alternate Image Description. 


Object 
Properties 
dialog box 


View and modify Object Properties 
for the selected object. 



For more information on assigning URLs, see “Creating 
an image map” on page 109. 
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View Controls toolbar (Windows only) 



Tool Options panel 



Set magnification. Preview page setup. 

1 1 00% | Full Dispjav ~3 ill 

Choose display mode. 



Use the View Controls toolbar to change document 
magnification and display mode. Click the Preview Page 
button to see your document’s dimensions and pixel 
resolution. 

Note: On the Macintosh, the View Controls are located 
at the lower-left corner of the document window. 

For more information on display modes, see 
“Optimizing document redraw” on page 21. 

Using panels 

Fireworks panels float above the document. Place them 
anywhere on your screen. Click a tab to display a 
particular panel. 

To return the panels to their default positions and reset 
application-level preferences, quit Fireworks, delete the 
preferences file named Fireworks Preferences located m 
the Fireworks folder (Windows) or the 
System Folder\Preferences folder (Macintosh) and 
relaunch Fireworks. 

These panels are tabbed: Layers, Frames, Brush, Fill, and 
Effect. Close any of these panels using the standard 
Windows or Macintosh close box. Open or close them 
by choosing the appropriate command from the 
Window menu. 




Options related to the active tool 
appear on the Tool Options panel 

The Tool Options panel contains settings for most 
Fireworks tools. For example, the Freeform tool options, 
shown above, include pressure sensitivity, preview, and 
maximum stroke size. Double-click a tool m the toolbox 
to open and close its Tool Options panel. 

For a complete discussion of Tool Options, see 
Fireworks Help. 
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Swatches panel 
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Use the Options 

pop-up to add, 

replace, delete, 
save, and sort 
swatches, and 
choose a color 
palette. 

Scroll the swatches. 



Macintosh Add a color to the 
palette by clicking 
in an empty area. 



View all swatches. 




Windows (docked) 



The Swatches panel shows Fireworks’ current color 
palette. Choose from this palette when designing 
graphics. Select a preset palette or import a palette using 
the Options pop-up. Use the Save Swatches command 
to save custom palettes for later import. Extract the color 
table from an indexed GIF graphic using the Add 
Swatches command. 
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Color Mixer 



To 


Do this 


Add swatches to the 
panel 


Choose Add Swatches. 


Replace all swatches with 
an external set 


Choose Replace 
Swatches. 


Save swatches to an 
external set 


Choose Save Swatches. 


Delete all swatches from 
the panel 


Choose Clear Swatches. 


Change to Macintosh, 
Windows, Web 216, or 
Grayscale palette 


Choose a palette from 
Options pop-up. 


Sort the swatches by 
color 


Choose Sort by Color. 


Use the custom color 
palette from the Export 
Preview dialog box 


Choose Current Export 
Palette. 



When moving the cursor over the Swatches panel, the 
cursor becomes an Eyedropper tool. Click a color to 
apply it automatically to selected objects and color wells. 



Select Brush or 
Fill color. 




Choose a color mode 
m- from the Options pop-up. 

Set color values. 

Pick a color from the 
color bar. 



Manually apply changes 
to selected objects. 

Check to automatically apply 
changes to selected objects. 

Swap brush and fill colors. 

Use default colors. 



Create colors using the Color Mixer, then apply colors 
to brushes, fills, effects, and text. Use the Options pop-up 
to select a color mode: RGB, Hexadecimal, CMX HSB, 
or grayscale. 



To 


Do this 


Apply color changes to 
the selected object's 
brush 


Click the Brush color well 
before choosing a new 
color. 


Apply color changes to 
the selected object's fill 


Click the Fill color well 
before choosing a new 
color. 


Apply color changes to 
the selected object's 
effect 


Click the Effect color well 
in the Effect panel 
before choosing a new 
color. 


Apply color to selected 
text 


Click the Fill color well 
before choosing a new 
color. 


Switch color modes 


Choose the desired color 
mode from the Color 
Mixer Options pop-up. 
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To 


Do this 


Switch brush and fill color 


Click the Switch Colors 
button. 

p 


Revert to default colors 


Click the Default Colors 
button. 

ft 


Define colors using the 


Double-click and color 


system color picker 


well. 


Change color models in 


Point to the color bar 


the color bar only 


and use Control-click 
(Windows) or 
Option-click 
(Macintosh). 



Brush panel 




Save, edit, name, and 
delete brushes using the 
Options pop-up. 

Choose a brush. 



Choose brush-specific 
settings. 



Preview and apply 
the brush stroke. 



Use the Brush panel to design and modify brushes, as 
well as alter the appearance of paths that have already 
been drawn. Changing brush settings affects selected 
paths and paths drawn after the settings are changed. 
Clicking Apply manually applies changes to selected 
paths. Checking the Auto-Apply checkbox 
automatically updates selected path and text objects as 
you change brush settings. 



Choose Edit Brush from the Options pop-up to open 
the Edit Brush dialog box. The Options, Shape, and 
Sensitivity panels within the Edit Brush dialog box 
control current brush attributes. Save, delete, and 
rename custom brushes using the Brush Options pop- 
up. 

See “The Brush panel” on page 70 and Fireworks Help 
for more information on brush options and settings. 

Fill panel 



r 




Save, edit, name, and 
delete gradients using 
the Options pop-up. 



- Choose a fill. 



- Preview and apply a fill 



-Choose fill-specific 
settings. 



Use the Fill panel to control how objects are filled. 
Choose from the available fill categories, and then choose 
one of the many fill types from within each category. 

Modify any fill by choosing a texture and intensity, fill 
color, anti-aliasing, feather, or hard edge. Check 
Transparent for a transparent fill texture and enter a 
texture amount greater than zero. Use the Fill Options 
pop-up to save, name, and delete Gradient fills. 

See “The Fill panel” on page 72 and Fireworks Help for 
more information on fill options and settings. 
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Effect panel 



Text Editor 
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- Save, rename, and 
delete effects using the 
Options pop-up. 



-Choose an effect. 



— Choose effect-specific 
settings. 



-Preview and apply 
effect. 




Set font, size, and style. 



Set orientation, 
alignment, and 
flow. 



Adjust kerning and leading 



Set horizontal 
scaling and 
baseline shift. 



Type or edit 
text. 



Apply changes to the document 
without closing the text editor. 



Use the Effect panel to apply and modify Live Effects in 
your document. Effects applied using the Effect panel 
are maintained and updated when the affected object is 
altered. For example, if you apply an edge bevel to a 
rectangular object and then make the object circular, the 
beveled edge adjusts accordingly. In addition, you can 
modify effects after applying them to an object by 
changing settings m the Effect panel. Effects that can be 
altered m this way are known as Live Effects. 

Like the Brush and Fill panels, the Effect panel has 
controls for selecting effect type and name. Use the 
Options pop-up to save, name, and delete custom 
effect settings. 

Note: To apply more than one effect to an object, 
choose Modify > Group after applying each effect. 

For more information on using effects, see “Live Effects” 
on page 74. 



Use the Text Editor to create and edit text. Unlike many 
other applications, Fireworks text is always editable all 
the time. Edit text quickly and easily after custom effects 
have been applied. 

Open the Text Editor by clicking on a document with 
the Text tool, double-clicking a text container, or 
selecting a text block and choosing Text > Editor. 

After closing the Text Editor, resize the text block by 
pulling or pushing handles. Move selected text blocks 
with the Pointer tool. 

For more information on creating and modifying text, 
see “Using text” on page 76. 
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Layers and Frames panels 



Navigate quickly to 
a specific frame. 



Lh" i | FfJ 



Lij"-? -f i 






I 






_l 



Change global view 
and lock settings; 
create, delete, and 
rename layers using the 
■ Options pop-up. 



■ Drag to rearrange 
layers. Double-click to 
rename a layer. 



Drag to assign 
selected objects to 
another layer. 

Lock and unlock individual layers. 
Show or hide individual layers. 




Create, delete, and duplicate frames. 
Distribute items across frames. Copy 
selected items to specific frames. 



Drag to rearrange 
frames. 



Use the Layers panel to manage multilayered 
documents. The Options pop-up includes commands 
for creating, deleting, and renaming layers and 
commands for viewing and locking all layers. 

To show or hide individual layers, click the Show/Hide 
icon at the left of the layer name. When the icon is 
visible, the layer is also visible. Similarly, clicking the 
Lock/Unlock icon locks and unlocks individual layers. 
When a layer is locked, items on that layer may not be 
moved or deleted. To move a selected object to another 
layer, drag the square indicator. 

Use the Frame pop-up and Previous Frame and Next 
Frame buttons to quickly scroll frames m your 
illustration without switching to the Frames panel. 

The Frames panel is the key to Fireworks animation 
and rollovers. Use the Frames panel and the Animation 
panel m the Export Preview dialog box to create 
animated GIFs. The Frames panel lists each frame of 
your animation and has controls for adding and deleting 
frames. Use the Options pop-up to add, delete, duplicate, 
and copy objects to specific frames. 

For more information on animation, see Animated 
GIF” on page 113. 



Use the Layers and Frames panels to organize and 
animate your illustration. Layers divide an illustration 
into discrete planes, as though the different components 
of the illustration were drawn on separate tracing 
paper overlays. 
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Navigating your document 



Setting document magnification 

Fireworks magnification ranges from 6 percent to 6400 
percent. 




Choose a magnification 
setting from the pop-up, 



To 



Do this 



Enlarge a document Choose the Magnify tool and 
view level click inside a document 

window 

or 

Choose an increment from the 
Magnification pop-up 

or 

Choose View > Magnification 
and choose a magnification 
level. 



Reduce a document Choose the Magnify tool, hold 
view level down Alt (Windows) or Option 

(Macintosh), and click in a 
document 

or 

Choose an increment from the 
Magnification pop-up 

or 

Choose View > Magnification 
and choose a magnification 
level. 



Zoom to the highest Choose 6400% from the 
magnification Magnification pop-up 

or 

Choose View > 

Magnification > 6400% 

or 

Press Control-6 (Windows) or 
Command-6 (Macintosh). 



Zoom to the lowest Choose 6% from the 
magnification Magnification pop-up 

or 

Choose View > 
Magnification > 6%. 



Zoom in to view a Choose the Magnify tool and 
specific area drag a selection area. 



Zoom out Choose the Magnify tool and 

hold down Alt (Windows) or 
Option (Macintosh) and drag a 
selection area. 
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Using magnification shortcuts 



To 


Use 


Set view to 50% 


Control-5 (Windows) or 
Command-5 (Macintosh) 


Set view to 1 00% 


Control-1 (Windows) or 
Command-1 (Macintosh) 


Set view to 200% 


Control-2 (Windows) or 
Command-2 (Macintosh) 


Set view to 400% 


Control-4 (Windows) or 
Command-4 (Macintosh) 


Set view to 800% 


Control-8 (Windows) or 
Command-8 (Macintosh) 


Set view to 3200% 


Control-3 (Windows) or 
Command-3 (Macintosh) 


Set view to 6400% 


Control-6 (Windows) or 
Command-6 (Macintosh) 


Zoom in 


Control-Spacebar (Windows) 
or Command-Spacebar 
(Macintosh) 

or 

Control-+ (Windows) or 
Command-+ (Macintosh) 


Zoom out 


Control-Alt-Spacebar 
(Windows) or Command- 
Option-Spacebar (Macintosh) 

or 

Control-[minus] (Windows) or 

Command-[minus] 

(Macintosh) 



Multiple document views 

Use multiple views to see one document at two different 
view modes or magnifications simultaneously. 

To open a second document view: 

1 Choose Window > New Window. 

2 Change the view and magnification of the new 
document window. 

To close a document view window, click the window s 
close box. 

Optimizing document redraw 

Choose one of two view modes from the View menu: 
Full Display or Draft Display. View modes affect a 
document’s on-screen representation, not its object data 
or output quality. 

When m Draft Display, switch to Full Display by 
choosing View > Full Display or by using the Display 
Mode pop-up on the View Controls toolbar 
(Windows) or m the lower-left corner of the document 
window (Macintosh). 



Hi 



jTTTTr: 3 c| ■ Display controls 

(Windows) 



Shortcut menus 

Click the right mouse button (Windows) or use 
Control-click (Macintosh) to display a shortcut menu 
containing a variety of commands. These menus vary 
according to which tool is chosen or which objects are 
selected. For example, one shortcut menu is available 
when selecting objects, while another shortcut menu is 
available when m image edit mode. Experiment with 
shortcut menus to speed your work. 



Choosing a display mode 



Choose 


To 


Full Display 


Display the document in all 
available colors with full 




detail. 


Draft Display 


Display paths as one pixel 
wide with no fill. Each image 




object appears as an x-box. 



Note: For easier editing, objects selected while in Draft 
Display mode display in full detail. 
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A case study 

Before Fireworks 

Before Fireworks, creating graphics for the web involved 
several applications, with each contributing to a portion 
of the task. Imagine that a web designer named Ping is 
asked by a client to create an artists palette to serve as a 
navigation graphic on a web page. The graphic will be 
used to link to other places on the client’s web site and 
must contain rich textures and effects to capture the 
viewer’s attention. Accordingly, the graphic must 
contain web-safe colors, text, textures, Live Effects, and 
URL links. 

How Ping approaches this task before Fireworks: 

1 Create a line drawing of an artist's palette using 
an application such as Macromedia FreeHand. 

2 Import the vector graphic into an image editing 
application such as Adobe Photoshop to rasterize 
the graphic (convert the vectors to pixels). Then 
apply color and bevel effects. 

3 Apply third-party filter effects, such as bevels and 
drop shadows. 

4 Use a utility such as Equilibrium DeBabelizer to 
convert the image to a web-safe color palette in 
the proper graphics file format with an 
optimized size. 

5 Painstakingly add URL objects or animation using 
yet another application. 

6 Manually attach hyperlinks to the hotspots that 
link to the client's web pages. 

7 View the results of this process in a web browser. 

Unfortunately, if the graphic has the slightest flaw, Pmg 
must often begin again and redo every step to reproduce 
the graphic. In adjusting file-size optimization, Pmg 
may need to retrace all or some of these steps. Even if the 
result is acceptable to the designer, client-driven changes 
such as text edits may result in repeating these steps 
many times until the final product is complete. 



The Fireworks way 

With Fireworks, Pmg doesn’t need those other 
programs. He needs only Fireworks to produce this 
graphic from start to finish. Even better, modifications 
are easy, even after the graphic has been loaded onto the 
web site. 

How Ping uses Fireworks to make this job easy: 

1 Open a new Fireworks document or import an 
existing document. 

In our example, the vector framework is created m 
Fireworks using the intuitive vector tools. 
Fireworks imports all major web design file formats. 
Alternatively, Pmg can create this vector art m 
FreeHand and open it directly m Fireworks. 
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4 Add text. 



2 Apply brushes, fills, and effects. 

Apply realistic brushes, fills, and effects using the 
Brush, Fill, and Effect panels. Use the Effect panel to 
bevel the edge of the palette. In this example, Ping 
uses the vector tools to alter the number and 
location of the pamt wells on the artist’s palette. He 
then applies a solid fill, parchment texture, and bevel 
effect to produce this image. 




Use the Brush, Fill, and Effect panels to add 
color and texture to objects. 



Use Fireworks’ Text Editor to create and modify 
text. 




Fireworks text is always editable. 



5 Add a drop shadow to the text. 

Apply a live drop shadow effect to the text using the 
Effect panel. Even though a drop shadow effect has 
been added, the text can still be modified. 



3 Reshape the object. 

Alter the shape of the artist’s palette using the 
Reshape Area tool. 
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6 Create the image map. 

Use the URLs toolbar to add URL objects to the 
paint wells. These hotspots can link to any URL 
Use the Image Map Options dialog box to define 
map type, background URL, and alternate image 
descriptions. In our example, Pmg selects the three 
labeled pamt wells and chooses Copy to URL. This 
command creates a URL object the same size, 
shape, and location as the original path. With each 
path selected, Pmg defines the linked URL using 
the URLs toolbar. 




Optimize the graphic upon export. 

Exporting from Fireworks is a dynamic experience 
offering live feedback and total control over color 
depth, file format, palette selections, and animation. 
View up to four simultaneous live previews as you 
compare output options and see the results on 
screen before exporting. 




8 Revise. 

Pmg’s client loves the graphic but requests two 
changes. The client wants a different color on the 
Feedback pamt well and wants the text’s drop 
shadow to be changed to an inner bevel. No 
problem! Pmg opens the file m Fireworks, changes 
the color of the Feedback pamt well, changes the 
drop shadow to an inner bevel, and exports again 
using the previous export settings. 

Objects created m Fireworks are always editable, all 
the time. 
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Working with Fireworks 

Object mode versus image edit mode 

In Fireworks, both vector path and bitmap image 
objects can be created and modified within a single 
document. Path objects may have a pixelated 
appearance, but are created using lines and points that 
form open or closed paths having brush strokes and fills. 
Path or text objects can be converted to images. Image 
objects are made up only of pixels and are created using 
tools suited for manipulating pixel-based objects. 

Fireworks operates m one of two edit modes: object 
mode and image edit mode. Some tools are active m only 
one edit mode and some tools change function from 
mode to mode. 

Editability 

Unlike many other graphics and image-editing 
applications, Fireworks objects are always editable all 
the time. 



To exit image edit mode, do any of the following: 

♦ Choose Modify > Exit Image Edit. 

♦ Choose ControFShift-D (Windows) or 
Command-Shift-D (Macintosh). 

♦ Click the Stop button on the Status toolbar 
(Windows) or the Opacity toolbar (Macintosh). 

♦ Click the canvas away from an image object when 
the cursor changes to the Stop cursor. 

Setting up your document 

Consider your document s design and final output 
requirements. Decide m advance which settings are best. 

Canvas size 

Set the canvas size m the New Document dialog box to 
define the size of your document. Set canvas dimensions 
using pixels, inches, or centimeters. Alter the canvas size 
by choosing Modify > Document > Canvas Size or by 
using the Crop tool to crop the background image. 



To edit 


Do this 


Path objects 


Select a path object with the 
Pointer tool. Select Behind tool, or 
Subselection tool. 


Image objects 


Select an image object and choose 
Modify > Image Object 

or 

Double-click an image object with 
the Pointer tool. 


Background 


Choose Modify > Background 


Image layer 


Image 

or 

Choose the Background layer on 
the Layers panel. 


Text 


Double-click a text block with the 
Pointer tool 

or 

Select a text block and choose 
Text > Editor 

or 

Click a text block with the Text 
tool. 



Resolution 



Resolution is defined m the New Document dialog box 
as either pixels per inch or pixels per centimeter. 
Consider the intended delivery medium when assigning 
resolution. For example, web graphics are usually saved 
at 72 pixels per inch. 



Note: Be sure to set the resolution properly in the New 
Document dialog box. Once your document's resolution 
has been set, it cannot be changed. 



Canvas color 

The canvas is the bottom layer of your document, under 
the Background layer. Transparent areas of the 
background layer appear as the canvas color. Choose a 
white canvas, a transparent canvas, or a color canvas m 
the New Document dialog box. Change canvas color 
later by choosing Modify > Document > Canvas Color. 
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Number of undo steps 

Choose File > Undo to reverse an action. Enter a value of 
up to 100 m the File > Preferences > General > “Undo 
Steps” field. RAM requirements increase as the number 
of undo steps increases. 

Note: Changes to the Undo preference do not take 
effect until Fireworks is restarted. 

Unit of measurement 

Define canvas size using pixels, inches, or centimeters m 
the New Document dialog box. The unit you choose 
appears m the Info bar. Change the unit using the Info 
bar’s Options pop-up. 

Note: Regardless of the document's unit of 
measurement, rulers always display in pixels. 

Rulers 

To show or hide rulers, choose View > Rulers. To set the 
ruler’s zero point, click and drag the zero-pomt marker 
from the upper-left corner of the document window to a 
new location. The zero point represents the intersection 
of the horizontal and vertical rulers. Double-click the 
zero point marker to reset the zero point to its 
default position. 

Grid 

The grid is a non-exportmg background of horizontal 
and vertical lines. Choose View > Grid to display the 
grid. With View > Snap to Grid checked, dragging an 
object near a grid line causes that object to snap to 
the grid. 




Set grid color. 

Set horizontal 
grid spacing. 
Set vertical 
grid spacing. 



Guides 

Use guides, which are non-exportmg guidelines, to 
precisely align and place objects. Choose View > Guides 
to show or hide guides. 

To add a guide with the page rulers active, drag from 
either the horizontal or the vertical ruler. 

With View > Snap to Guides checked, objects snap 
when dragged near guides. 

Editing guides 

Choose View > Edit Guides to open the Guides 
dialog box. 




Use 


To 


Color 


Change the guides' color. 


Show Guides 


Show or hide the guides in your 
document. 


Snap to 
Guides 


Easily align objects to guides. 


Lock Guides 


Prevent guides from moving. 


Clear All 


Remove all guides. 
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Working with the grid and guides 



To 


Do this 


Show or hide 


Choose View > Grid 


the grid 


or 

Check Show Grid in the Grid 
dialog box. 


Snap objects to 


Choose View > Snap to Grid 


the grid 


or 

Check Snap to Grid in the 
Grid dialog box. 


Modify the grid 


Choose View > Edit Grid. 


Show or hide rulers 


Choose View > Rulers. 


Show or hide guides 


Choose View > Guides. 


Snap objects to 


Choose View > Snap to 


guides 


Guides 

or 

Check Snap to Guides in the 
Guides dialog box. 


Edit guides 


Choose View > Edit Guides. 


Lock guides 


Choose View > Lock Guides. 



Importing and exporting 

Fireworks can import a wide variety of vector and 
bitmap graphic formats and can export many bitmap 
graphic formats. Discussed m “Using Export Preview” 
on page 95, one of Fireworks’ greatest strengths is the 
ability to export many formats with extensive export 
preview capabilities. 

Export preview provides immediate and dynamic 
feedback on the appearance and technical specifications 
of your graphics before exporting them. Use the Export 
Preview to experiment with export formats, color depth, 
and palette assignments and immediately see the results. 

Importing bitmap images 

Fireworks imports BMP, GIF, JPEG, PICT 
(Macintosh), PNG, TIFF, xRes LRG, and Photoshop 
files. When imported, these files are fully editable using 
Fireworks bitmap editing tools and many Photoshop 
third-party plug-ms while m image edit mode. In 
addition to file name and location, the Import File 
dialog box shows file size, format, and a thumbnail 
preview, if available. 

To import a bitmap graphic: 

1 Choose File > Import or use Command-R 
(Macintosh) or Control-R (Windows). 

2 Choose the file to import. 

3 Position the import cursor where the upper-left 
corner of the graphic is to appear. 

4 Click the mouse button to place the graphic at its 
default size, or click and drag the import cursor 
to resize the image while importing. 



Importing vector art 

Fireworks imports vector graphics from Macromedia 
FreeHand 7 and 8, Adobe Illustrator 7 and 
CorelDRAW Imported paths are fully editable as if 
they were created m Fireworks. 



Getting Your Bearings 27 



Exporting 



Fireworks offers several choices for importing multilayer 
documents, including layer-todayer and layer-to-frame 
interpretations. See “Importing FreeHand, Illustrator, or 
CorelDRAW files” on page 93 for more information on 
importing vector graphics. 



Note: See Chapter 4, "Importing and Exporting, 
for a complete discussion of Fireworks' extensive 
export capabilities. 



View specifications for current Save and choose preset 
Choose file format. export settings. export settings. 




Automatically 

optimize. 



Choose color 
options. 



View the current 
color palette. 



Adjust transparency. 



Pick, pan, and 
magnify preview. 



Scroll or play 
animation frames. 



Choose up to four 
simultaneous 
previews. 



Keep settings as 
document defaults 
but do not export yet. 

Activate the 
Export Wizard. 



Preview current 
export settings. 

Open the Export File 
dialog box. 

Resize this dialog box. 
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To export a graphic: 

1 Choose File > Export or use Control-Shift-R 
(Windows) or Command-Shift-R (Macintosh) to 
open the Export Preview dialog box. 

2 Choose settings on the Options, File, and 
Animation panels. 

3 View the effect of your settings in the 
preview area. 

The preview area can display up to four views 
simultaneously. 

4 Click Export when you are ready to export the file 
with the current settings. 

For more information on exporting graphics, see “Using 
Export Preview” on page 95. 

Export Wizard 

Activate the Fireworks Export Wizard by choosing 
File > Export Wizard or by clicking the Export Wizard 
button m the Export Preview dialog box. The Export 
Wizard asks questions regarding your exported file’s 
intended use and suggests appropriate graphic formats. 



Getting Your Bearings 29 



30 Chapter 1 



Tutorials 



Tips for using the tutorials 

The tutorials in this chapter quickly introduce you to an 
assortment of graphic creation and production tasks 
that are fully described elsewhere m this manual, Using 
Fireworks ; and m Fireworks Help. The ongoing example 
assumes you are designing the web home page shown 
below for a fictitious company called StarGaze. 




These tutorials are not start-to-fimsh instructions for 
creating web site features. They demonstrate Fireworks 
concepts and activities to help you understand how to 
use the application. 

Each tutorial is self-contained, so you can work on them 
out of order. Choose the topics that best suit your 
learning goals: 

♦ Working m object mode 

♦ Activating image edit mode 

♦ Applying and editing fills 

♦ Reshaping paths 

♦ Masking objects 

♦ Working with text 

♦ Creating rollovers 

♦ Linking an image map 

♦ Working with animation 



Note: TheMacromediawebsitewww.macromedia.com 
has more information about using Fireworks, including 
tips and tutorials. 

Font substitution 

To accurately reproduce the tutorial illustrations on 
your computer, install the fonts Antique Olive T 
Medium and Copperplate T Bold. Included with 
Fireworks, these fonts are m the Tutorials folder within 
your Fireworks application folder. Without these fonts, 
Fireworks may warn you and automatically substitute 
another font when opening some tutorial files. 

Opening tutorial files 

To preserve the tutorial files for reuse, it is important to 
open each using the File > Open command and check 
Open as “Untitled” m the Open File dialog box. 
Opening an untitled document minimizes the chance 
of saving over the original file. However, if you do 
open the original file, remember to save the file using 
another name. 




References 

♦ The greater-than ( > ) sign indicates a series of menu 
commands. Here is an example of a sentence 
directing you to choose the Bring to Front 
command from the Arrange menu: 

Choose Modify > Arrange > Bring to Front. 

♦ Names of elements that appear m the menus, on 
panels, m dialog boxes, or m ToolTips are capitalized. 
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♦ With Auto-Apply checked, press Enter or click 
Apply after typing a value m one or more fields on a 
panel. Auto-Apply does not automatically apply 
typed values. 



Preferences 

Preferences are application-level settings. To edit these 
settings, choose File > Preferences. To reset your 
preferences to the Fireworks defaults, exit Fireworks, 
delete the preferences file named Fireworks 
Preferences.txt located m the Fireworks folder 
(Windows) or Fireworks Preferences located m the 
System Folder\Preferences folder (Macintosh) and then 
relaunch Fireworks. 




Correcting mistakes 

Remember that if you make a mistake, you can choose 
Edit > Undo. The default number of undo steps is eight. 
To adjust the number of undo steps, choose File > 
Preferences to display the Preferences dialog box. Type a 
new value m the Undo Steps field, click OK, and 
relaunch Fireworks. 



Toolbox tools 

To choose a tool m the Toolbox, click the tool’s button. A 
tool with a triangle at the lower-right corner belongs to a 
tool group. To choose a tool m a tool group, click and 
hold down the button to display the tool group, move 
the pointer cursor over the desired tool, and release the 
mouse button. 
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Choose the Crop tool in the Pointer tool group in the Toolbox. 



Working with panels 

When a step asks you to display a panel, choose the 
panel name from the Window menu. With a panel 
already displayed, choosing the panel name from the 
Window menu closes it. If this happens, repeat the 
command to display the panel again. 

Paths and marquees 

If a selected path or marquee is hard to see because of its 
highlight color, choose File > Preferences, click the 
Highlight color well, and choose a new color from the 
system color picker. 

If a marquee or the paths of selected objects are hidden, 
uncheck View > Hide Edges to show the marquee or 
paths of selected objects. Use the Hide Edges command 
to hide a marquee or an object’s path when it obscures 
your on-screen work. 



Tasks and pictures 

Each step m the tutorials is actually a series of short tasks 
comprising a step group. Not every task has a 
corresponding picture. If you complete a task and 
cannot find a picture as a guide, go to the next task. 
Generally, the final picture for the step group 
corresponds to the last task m the procedure. 



Object opacity 

Before beginning a tutorial, choose Window > Toolbars > 
Opacity. Set the opacity to 100 and choose the Normal 
blending mode, so that the objects you create are fully 
opaque and have no blending mode. 
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Working in object mode 

Fireworks has two primary working environments: 
object mode and image edit mode. Most Fireworks 
graphic creation and design occurs m object mode. Pixel 
editing occurs m image edit mode. For a detailed 
discussion of these modes, see “Object mode and image 
edit mode” on page 36. In this lesson, learn how to select 
and manipulate objects comprising the planet Saturn. 






Show/Hide icon 



Open the Planetspngfile. Hide all layers except Saturn, Foreground, 
and Background 




1 Choose File > Open. In the Open File dialog box, 
navigate to the Tutorials folder within the 
Fireworks folder. Check Open as "Untitled," 
choose the Planets. png file, and click Open. 

If necessary, choose Window > Layers to display 
the Layers panel. Click the show/hide icon in the 
first column next to the Text layer, the Earth layer, 
and the More planets layer to hide each layer. 
Leave the Saturn, Foreground, and Background 
layers visible. 



2 Choose the Pointer tool in the Pointer tool group. 
If necessary, choose Window > Tool Options and 
check Mouse Highlight in the Tool Options panel. 
The mouse highlight previews currently selectable 
objects. Move the Pointer tool over the body of 
the planet Saturn. 

Saturn's body consists of two objects: a circle and 
a half circle. Its ring is a composite path 
consisting of two ellipses. 



Move the Pointer tool over the planet Saturn and observe the 
mouse hwhlwht. 





3 Use the Pointer tool to drag away one of the two 
objects forming Saturn's body. Notice that the 
path along the selected object is highlighted. If 
you cannot see a selected object's path, uncheck 
View > Flide Edges to show the hidden path. 

Drag away the second object. Notice how the 
planet is constructed and then choose 
Edit > Undo to reassemble the pieces. 



Drag apart the pieces of Saturn. 
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Use the Pointer tool and the Select Behind tool to select all three 
objects in the planet. Vmv the selection feedback. 



4 Use the Pointer tool to select all three pieces of 
Saturn. Click to select the ring. Hold down Shift 
and click the bright side of the planet to add the 
half circle to the selection. Choose the Select 
Behind tool in the Pointer tool group. Hold down 
Shift and click the bright side again to add the 
circle behind the half circle to the selection. 

In object mode, feedback defining the current 
selection appears in the Status bar (Windows) or 
in the Opacity toolbar (Window > Toolbars 
>Opacity) (Macintosh). The selection feedback 
reads "3 Objects." 




Group the three objects. Choose any Transform tool and use the 
transformation handles to rotate the group. 




5 With these objects selected, choose Modify > 
Group to group them together. The selection 
feedback reads "Group: 3 Objects." A group has a 
selection handle at each corner. 

Choose any tool in the Transform tool group to 
activate eight transformation handles. Move the 
tool outside one of the corner transformation 
handles until the rotate cursor appears. Drag 
outside the handle to rotate the group. When 
finished rotating, double-click to deactivate the 
transformation handles. 



6 The half circle and circle have a Radial fill that 
transitions from the bright color at the center to a 
dark color. Choose the Subselection tool to select 
these objects within the group. Click the bright 
side of the planet to select the half circle. Hold 
down Shift and click the dark side of the planet to 
select the circle. Leave these objects selected. 

If you make a mistake selecting, choose Select > 
None and try again. Notice that objects selected 
with the Subselection tool display path points. 



Use the Suhselection tool to select the half circle and the circle. 




Use the Paint Bucket tool to reset fills. 



7 Choose the Paint Bucket tool to display fill 

handles for selected objects. Move the tool over 
the round handle marking the center of the fill. 
The paint bucket cursor changes to a pointer 
cursor. Drag the round handle to reposition the 
center of the fill. Drag the square handle to set 
the radius of the bright color. 

For more information about working in object 
mode, see the tutorial "Reshaping paths" on 
page 40, which features editing tasks in 
object mode. 
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Activating image edit mode 

Switch to image edit mode to edit the pixels of imported 
images, images created with Fireworks, or the 
Background image. For details about object mode and 
image edit mode, see “Object mode and image edit mode” 
on page 56. In this lesson, become familiar with 
switching between the two modes. 





Choose File > Open. In the Open File dialog box, 
navigate to the Tutorials folder within the 
Fireworks folder. Check Open as "Untitled," 
choose the Star.png file, and click Open. 

In Fireworks, files open in object mode. The 
Star.png file consists of an image, a star-shaped 
object, and a text block. 



Open the Starpngfile. 




Select the star and convert it into an mage object. Activate mage edit 
mode. 




IS 

Stop cursor 




Using the Polygon Lasso tool, 
trace the right half of the 
star starting at the top, then 
close the marquee at the 
starting point. 



2 Choose the Pointer tool in the Pointer tool group 
and click the star to select it. Choose Select > 
Convert to Image to convert this path object into 
an image object. Leave the star selected and 
choose Modify > Image Object to activate image 
edit mode and the tools specific to this mode. 

In object mode, a selected object has a 
highlighted path, and a selected image has a 
rectangular bounding box. In image edit mode, 
the bounding box becomes a striped border. 



3 Use the Polygon Lasso tool in the Lasso tool 

group to select the right half of the star along the 
inside edge of the brush stroke. Starting at the 
top point, click each vertex around the right half, 
then click the starting point again to close the 
marquee. 

Press Delete to create a transparent area through 
which the nebula image is visible. Move the 
cursor away from the star image. When a stop 
cursor appears, click to switch to object mode. 
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Crop tool cursors 




Select the nebula mage and place it on the Background layer Use 
the Crop tool to crop the canvas to the size of the image. 
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Status bar 





Stop buttons 
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Opacity toolbar 

Click the Stop button on the Status bar (Windows) or 
Opacity toolbar (Macintosh) to deactivate mage edit mode. 



r 



Import cursor 




Use the Pointer tool to select the nebula image. 
Note that it has a bounding box. Choose Select > 
Drop Selection to merge the nebula image with 
the Background image on the Background layer. 
The nebula image becomes deselected. 



Choose the Crop tool in the Pointer tool group 
and drag a crop marquee that fits to the size of 
the image. Drag the handles as necessary to 
resize the crop marquee. Double-click the Crop 
tool cursor within the crop marquee to remove 
the visible canvas. The Crop tool is available only 
in object mode. 



5 Choose Modify > Background Image to activate 
image edit mode on the Background layer. A 
striped border appears around the entire 
background image. Explore the Toolbox to see 
which tools are available in image edit mode. 

Click the Stop button on the Status bar 
(Windows) or on the Opacity toolbar (Macintosh) 
to deactivate image edit mode. To display the 
Opacity toolbar, choose Window > Toolbars > 
Opacity. 



6 Importing and placing an image is a function of 
object mode. Choose File > Import, and in the 
Import dialog box, choose the Earth. png file, and 
click Open. When the import cursor appears, click 
to place the upper-left corner of the Earth image 
below the word "StarGaze." 

If necessary, use the cursor keys to center the 
Earth on the star. Choose the Pointer tool and 
double-click the Earth image to activate image 
edit mode. 



Import the Earth image ; then switch to mage edit mode. 




7 Choose the Magic Wand tool in the Lasso tool 
group, click the black area of the Earth image to 
select the region of black pixels. Press Delete to 
change the black area to transparent. The star 
image object and the background image are now 
visible. 

This completes practice switching between 
modes. See also the tutorial "Working in object 
mode" on page 34 to learn more about 
manipulating objects in that mode. 



Select the black area in the Earth mage and delete it. 
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Applying and editing fills 

Use the Paint Bucket tool and the Fill panel to apply 
preset or custom fills. Specify fill color, texture, and 
opacity Apply and modify fills m path objects or 
m images. 




Show/Hide icon 
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Open the Planetspngfile. Hide the Text layer. Set the opacity to 100. 




1 Choose File > Open. In the Open File dialog box, 
navigate to the Tutorials folder within the 
Fireworks folder. Check Open as "Untitled," 
choose the Planets. png file, and click Open. 

If necessary, choose Window > Fill to display the 
Fill panel and Window > Layers to display the 
Layers panel. Click the show/hide icon in the first 
column next to the Text layer to hide the layer. 
Leave the other layers visible. If necessary, choose 
Window > Toolbars > Opacity to display the 
Opacity toolbar. Set the opacity to 100 using the 
pop-up slider. 




2 On the Fill panel, choose Waves from the Fill 
category pop-up, choose "Red, Blue" from the Fill 
name pop-up, and choose Anti-Alias from the 
Edge pop-up. Choose Plaster from the Texture 
pop-up, type 1 5 in the Amount of texture field 
and press Enter. Uncheck Transparent. If 
unchecked, check the Auto-Apply checkbox. 




3 Choose the Paint Bucket tool. If necessary, choose 
Window > Tool Options to display the Tool 
Options panel. Check Mouse Highlight and 
uncheck Selected Paths Only. 

Move the Paint Bucket tool over the blue planet 
to display a red mouse highlight. The mouse 
highlight previews currently tillable and 
selectable objects. 



Set options for the Paint Bucket tool 
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With the Paint Bucket tool, click the planet to 
apply the current fill and to display the object's 
fill handles. Drag the round handle for the Waves 
fill toward the right and drag the square handle 
toward the lower-left. This creates a pattern of 
narrow waves on the planet. 



Use the fill handles to modify the look of the Waves fill 




5 Choose Edit Gradient from the Options pop-up 
on the Fill panel to display the Edit Gradient 
dialog box. Drag the color well at the right to the 
middle of the color ramp. Then click at the far 
right to place a third color well along the color 
ramp. Double-click the third color well to display 
the system color picker. Choose a color and close 
the picker. Then click OK to close the Edit 
Gradient dialog box. 

Choose Select > None to deselect the planet. 



Edit the colors in the Waves fill. 





6 On the Fill panel, choose Solid from the Fill 
category pop-up, choose Anti-Alias from the 
Edge pop-up, choose Ripple from the Texture 
pop-up, type 65 in the Amount of texture field 
and press Enter. Uncheck Transparent. 

If necessary, choose Window > Color Mixer to 
display the Color Mixer. Type 0 in each of the 
color value fields to create a black fill and click 
Apply on the Color Mixer. 



Set the texture and color for a new fill. 




Click the Paint Bucket tool to apply the fill to the Background mage. 
Click the tool again to increase the intensity of the fill. 



7 Choose Modify > Background Image to activate 
image edit mode. A striped border appears 
around the nebula image. 

Type 25 in the Opacity field on the Opacity 
toolbar and press Enter. Click the Paint Bucket 
tool within the border to apply the fill. Click the 
image a second time to increase the intensity of 
the fill. 

In image edit mode, the Paint Bucket tool fills 
entire images or floating pixel selections. To learn 
more about applying and editing fills, see 
"Applying brushes and fills" on page 70. 
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Reshaping paths 

In this lesson, use the Pen, Freeform, Reshape Area, and 
Path Scrubber tools to modify simple shapes m a scene 
depicting a comets collision with a planet. 




■ — 




Impact zone 



Comet's tail 
Comet's core 
Planet 

Open the Cometpngfile. 




1 Choose File > Open. In the Open File dialog box, 
navigate to the Tutorials folder within the 
Fireworks folder. Check Open as "Untitled," 
choose the Comet.png file, and click Open. 

If necessary, choose Window > Brush to display 
the Brush panel and choose Window > 

Toolbars > Opacity to display the Opacity 
toolbar. Make sure the opacity is set to 1 00. 



2 Create a brush to draw the cloud formations in 
the planet's atmosphere. Choose Unnatural from 
the Brush category pop-up and choose 3D Glow 
from the Brush name pop-up. Drag the Edge 
Softness slider to about midway and type 25 in 
the Brush Tip Size field. Choose Chiffon from the 
Texture pop-up and type 40 in the Amount of 
Texture field. Double-click the Brush color well to 
display the system color picker, choose a reddish- 
orange color, and close the picker. 



Create a brush for the planets clouds 




3 Choose the Brush tool in the Brush tool group. In 
a blank area next to the planet, draw a series of 
horizontal lines that slightly overlap one another 
and extend beyond the planet's width. 

Choose the Pointer tool. Drag a selection area 
around all the lines to select them. Choose 
Modify > Join to join them into a single 
composite path. Leave the path selected. 



Draw a senes of horizontal lines and join them together to form a 
single composite path 
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Choose the Reshape Area tool and set options Use the tool to 
transform the horizontal lines into a ivavy cloud pattern. 





Choose the Reshape Area tool in the Freeform 
tool group, and if necessary, choose Window > 
Tool Options to display the Tool Options panel. 
Type 80 in the Size field and 40 in the Strength 
field and press Enter. Uncheck Preview. 

Move the Reshape Area tool over the lines, click 
to display the reshape area cursor, and drag 
slightly upward or downward. Release the mouse 
button. Click and drag again to continue 
reshaping the composite path to create a wavy 
cloud pattern. 



5 Use the Pointer tool to drag the composite path 
over the planet. With this path selected, choose 
Edit > Cut. Use the Pointer tool to select the 
planet and choose Edit > Paste Inside to create a 
paste inside group. Choose Select > None to 
deselect the composite path within the group. 



Paste the cloud pattern inside the planet. 




6 Use the Pointer tool to drag the comet's core next 
to the planet and leave it selected. Choose the 
Pen tool and move it over a path segment. When 
the insert point cursor appears, click to add a 
point to the path. Hold down Control (Windows) 
or Command (Macintosh) to temporarily switch 
to the Subselection tool, and drag the point to a 
new position. 



Use the Pen tool to add a point and use the Suhselection tool to 
reposition it. 




7 Choose Window > Effect to display the Effect 
panel, choose Inner Bevel from the Effect 
category pop-up, and choose Flat from the Effect 
name pop-up. Type 7 in the Width field, 85 in the 
Contrast field, 1 in the Softness field, and 320 in 
the Angle field and press Enter. Choose Raised 
from the Button Preset pop-up. If unchecked, 
check the Auto-Apply checkbox. Choose Select > 
None to deselect the core. 



Apply an effect to the comet’s core. 
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Drag the comet’s tail next to the comet’s core and leave it selected. 
Choose the Path Scrubber f+J tool 




8 Use the Pointer tool to drag the comet's tail next 
to the comet's core and leave it selected. Choose 
the Path Scrubber (+) tool in the Freeform tool 
group to adjust the brush stroke of the comet's 
tail. On the Tool Options panel, check Pressure, 
uncheck Speed, and type 5 in the Rate field. 

The Path Scrubber tool changes the pressure and 
speed effects of brushes that have a tapered 
appearance in the Brush panel preview. The tail's 
brush stroke is Calligraphy Bamboo. 



9 Drag the tool over the selected path near the 
comet's core to create a wide head for the comet. 
With the Path Scrubber tool chosen, hold down 
Alt (Windows) or Option (Macintosh) to switch to 
the Path Scrubber (-) tool. Do not release Option 
or Alt. Drag the tool over the selected path away 
from the head to taper the tail. Continue 
modifying the brush stroke until you obtain the 
desired effect. 



Scrub the tool on the selected path so that the brush stroke is thicker 
near the comet’s head and thinner farther away. 




Move the circle with the Starburst gradient over the planet. Choose the 
Freeform tool and set options. 




Use the Freeform tool to create an object for the impact zone. 



10 Create an object marking the impact zone of the 
comet and the planet. Locate the circle with the 
Starburst gradient at the lower-right corner of 
the canvas. Use the Pointer tool to drag this 
shape over the planet. 

Choose the Freeform tool in the Freeform tool 
group. On the Tool Options panel, type 24 in the 
Size field and press Enter. Check Preview. 



11 Move the Freeform tool over the selected ellipse. 
When the pull cursor appears, drag the path 
inward. Do not release the mouse button. Press 
the left cursor key or the right cursor key to 
decrease or increase the length of the segment 
pulled. Release the mouse button when finished. 
Continue pulling more path segments to finish 
the object. Choose Select > None to deselect the 
reshaped ellipse. With the Pointer tool, drag the 
comet and the tail into place. 

To learn more about modifying paths, see 
"Editing in object mode" on page 61. 
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Masking objects 

Create masks m object mode. Mask objects either by 
choosing Edit > Paste Inside to paste objects within a 
selected path or by choosing Modify > Mask Group to 
use the alpha transparency of the topmost object m a 
group. Masks and mask objects are always editable. In 
this lesson, create a graphic using text, a star-shaped path, 
and an image of a nebula. 




Open the Starpngfile. Change the path highlight color in the 
Preferences dialog box. 




1 

Mask handle 



Paste the nebula image inside the star Once it is pasted, use the mask 
handle to move the image within the paste inside group. 




Subselect the star and then feather its fill. 




1 Choose File > Open. In the Open File dialog box, 
navigate to the Tutorials folder within the 
Fireworks folder. Check Open as "Untitled," 
choose the Star.png file, and click Open. 

Choose File > Preferences to display the 
Preferences dialog box, and click the Highlight 
color well to display the system color picker. 
Choose a color other than blue and close the 
picker. Click OK to close the Preferences dialog 
box. Make sure View > Hide Edges is unchecked. 



2 Use the Pointer tool to select the nebula image. A 
selected image has a rectangular bounding box. 
Choose Edit > Cut to cut the image to the 
Clipboard. Select the star and choose Edit > Paste 
Inside. This creates a paste inside group in which 
the star (the masking path) masks the nebula. 

Choose Select > None to deselect the image, and 
then use the Pointer tool to select the paste inside 
group. Drag the mask handle to offset the image 
within the group. Leave the group selected. 



3 Choose the Select Behind tool, hold down Alt 
(Windows) or Option (Macintosh), and click twice 
to select the star. If necessary, choose 
Window > Fill to display the Fill panel. Choose 
Solid from the Fill category pop-up and Feather 
from the Edge pop-up. Type 20 in the Amount of 
feather field and press Enter. 

To observe how the blue glow changes, enter 
incremental amounts up to 40. Click the Brush 
tab, and choose None from the Brush category 
pop-up to eliminate the brush stroke. 
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4 Choose Select > None to deselect the path. Use 
the Pointer tool to select the paste inside group. 
The mask handle appears at the center of the 
selected group. Choose Modify > Object 
Properties to display the Object Properties dialog 
box. Choose the Clip To Top Object's Image 
option, which activates the alpha transparency of 
the masking path, and click OK. 



Convert the paste inside group into an alpha mask group. 




Apply a transparent texture to the masking path 
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Use the Freeform tool’s pull cursor to pull the maskingpath 





Note: To dismantle either a paste inside group or an 
alpha mask group, select it and choose Modify > 
Ungroup. 



5 Choose the Select Behind tool, hold down Alt 
(Windows) or Option (Macintosh), and click twice 
to select the masking path. On the Fill panel, 
choose Onyx from the Texture name pop-up, type 
75 in the Amount of texture field and press Enter. 
Check Transparent. 

The light regions of the texture designate 
transparent areas showing the canvas color. The 
dark regions of the texture designate opaque 
areas showing the image. Leave the masking path 
selected. 



6 Choose the Freeform tool in the Freeform tool 
group. If necessary, choose Window > Tool 
Options to display the Tool Options panel, and 
then uncheck Preview. Move the tool over the 
path. When the pull cursor appears, click and 
drag the path outward from the center of the 
star. Do not release the mouse button. 

Press the left cursor key or the right cursor key to 
decrease or increase the length of the pulled 
segment. Release the mouse button when 
finished. Continue pulling out more path 
segments to create a gaseous cloud. 



7 Choose Select > All and then choose Modify > 
Mask Group. Because the text is the topmost in 
the object stacking order, it becomes the masking 
path of the alpha mask group. Choose the Text 
tool and click the text block to open the Text 
Editor. Type 100 in the Size field, type the letters 
"SG" in the text field, and click OK to apply the 
changes. 



See "Masking" on page 86 for more information 

Create an alpha mask group using the text as the maskingpath about mask g rou ps. 

The text remains editable. 
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Working with text 

Creating and editing text m Fireworks is easy. Click the 
canvas with the Text tool to open the Text Editor, choose 
text attributes such as font, size, and alignment, and type 
text m the text preview 

Apply color, texture, and Live Effects to text; attach text 
to a path; and use the transform tools to scale and distort 
text. In this lesson, create the StarGaze logo and 
company slogan. 
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Choose File > Open. In the Open File dialog box, 
navigate to the Tutorials folder within the 
Fireworks folder. Check Open as "Untitled," 
choose the Logo. png file, and click Open. Use the 
Pointer tool to select the blue ellipse. Selecting 
this object sets the current fill color to blue. 

Note: For information regarding the fonts used in 
this lesson, see "Tips for using the tutorials" on 
page 32. 



Open the file Logo.pngand set the fill color. 





Horizontal Scale 
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2 Choose the Text tool and click the canvas above 
the blue ellipse to display the Text Editor. Choose 
Copperplate T Bold from the Font pop-up, type 
44 in the Size field, and type 70 in the Horizontal 
Scale field. In the text preview, type "STARGAZE" 
in uppercase letters. Click OK to apply the settings 
and close the Text Editor. Drag the text block 
above the ellipse. Leave the text block selected. 



Create the name of the company in the Text Editor 





3 Choose the Pointer tool, hold down Shift, and 
click the blue ellipse to add it to the selection. If 
you accidentally select a different object, hold 
down Shift and click it again to deselect it. 
Choose Text > Attach to Path. The path is 
visible only when selected. Leave the text on a 
path selected. 



Attach the text to the blue ellipse. 
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4 If necessary, choose Window > Effect to display 
the Effect panel. Choose Inner Bevel from the 
Effect category pop-up and choose Smooth from 
the Effect name pop-up. Type 7 in the Width 
field, 85 in the Contrast field, 5 in the Softness 
field, and 135 in the Angle field and press Enter. 
Check the Auto-Apply checkbox. 



Apply the Smooth Inner Bevel effect to the text. 





Group before applying another effect. 




Change the color of the glow from red to white. 
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5 With the text on a path selected, choose 

Modify > Group and leave the group selected. 

On the Effect panel, choose Glow from the Effect 
category pop-up and choose Basic from the Effect 
name pop-up. Type 45 in the Opacity field, 20 in 
the Softness field, and 8 in the Width field and 
press Enter. The default color for the effect is red. 
Leave "STARGAZE" selected. 

Note: After applying one effect, you must group an 
object or objects before applying another effect. 



6 Click the color well on the Effect panel if it is not 
active. An active color well has a black border. If 
necessary, choose Window > Swatches to display 
the Swatches panel and choose Web 216 Palette 
from the Options pop-up. 

Move the cursor over the Swatches panel until it 
changes to an eyedropper cursor. You may need 
to scroll to view the white swatch at the bottom 
of the panel. Click the white swatch to apply the 
color to the Effect color well and change the glow 
from red to white. 



7 Choose the Subselection tool and double-click the 
text to display the Text Editor. Insert the cursor 
between the letters R and G. Type 40 in the 
kerning field and click OK to close the Text Editor. 
Select the yellow star, drag it over the word, and 
center it between the letters R and G. Choose 
Modify > Arrange > Bring to Front so that the 
star is on top. 



Subselect the text in the group and change the kerning 
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Use the Skew tool to resize the left side of the text block containing the 
company slogan. 




With the Pointer tool, select the text block at 
the right for the company slogan. Choose the 
Skew tool from the Transform tool group to 
display eight transformation handles around the 
text block. 

Moving the tool over each handle changes the 
cursor to indicate which transformation function 
is available. Move the tool over the lower-left 
handle until the pointer cursor appears. Drag 
this handle upward to squash the left side of the 
text block. 



9 Double-click the text block to deactivate the 
transformation handles, and double-click it again 
to display the Text Editor. Highlight all the text in 
the text preview, click the Stretched Alignment 
button to stretch the text to fit the text block, 
and click OK. If necessary, use the cursor keys to 
better position the text block. 



In the Text Editor, set the text to fit the text block. 




10 Use the Pen tool to create a wavy line from left to 
right that is as wide as the text block. Click the 
Pen tool midway along the left edge of the text 
block to place a corner point. Click and drag the 
tool in the center of the text block to place a 
curve point. Double-click midway down the right 
edge of the text block to place another corner 
point and finish the line. Leave the line selected. 



Use the Pen tool to draw a smooth, wavy line. 







11 Choose the Pointer tool, hold down Shift, and 
click the text block to add it to the selection. 
Choose Text > Attach to Path to attach the 
paragraph to the wavy line. 

To learn more about modifying text attributes, 
see "Using text" on page 76. 



Attach the paragraph to the path. 
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Creating rollovers 

JavaScript rollovers enhance web interactivity by 
changing appearance, or state, m response to mouse 
cursor activity. Rollovers often appear as buttons on a 
web page. The common rollover states are Up, Over, 
Down, and onClick. 

Create the states, placing each on its own frame, and then 
export them. Fireworks outputs the necessary HTML 
and JavaScript code. This tutorial creates four states of a 
single rollover. 





Down OnClick 



1 Choose File > Open. In the Open File dialog 
box, navigate to the Tutorials folder within 
the Fireworks folder. Check Open as 
"Untitled," choose the Button. png file, and 
click Open. This file contains a text block and a 
spiral-shaped object. 



Open the Buttonpngfile. 
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2 Choose the Pointer tool, and select the object. Do 
not select the text block. If necessary, choose 
Window > Effect to display the Effect panel. 
Choose Inner Bevel from the Effect category pop- 
up and Flat from the Effect name pop-up. Type 6 
in the Width field, 79 in the Contrast field, 3 in 
the Softness field, and 135 in the Angle field and 
press Enter. Choose Raised from the Button 
Preset pop-up. If unchecked, check the Auto- 
Apply checkbox. Leave the button selected. 



Use the object and the Effect panel to design an Up button. 



Note: Fireworks Button Preset options are suggested 
effect presets. They do not create rollovers. 





3 If necessary, choose Window > Frames to display 
the Frames panel. Hold down Shift and add the 
text block to the selection. Choose Duplicate 
Frame from the Frames panel Options pop-up. 
Type 3 in the Number field to specify the number 
of duplicates, choose After current frame, and 
click OK. In the Frames panel, three new frames 
appear after the first for a total of four frames, 
one for each button state. Frame 2 becomes the 
active frame. 



Duplicate the current frame three times for a total of four frames ; 
one for each button state. 
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Apply Raised in Frame 1. 



FLnffWQHKC |, 

Apply Highlighted in Frame 2. 

el 
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Apply Inset in Frame 3. Apply Inverted in Frame 4. 

Apply a different button state effect to each object. 




n 

Rectangle URL tool 
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Create a URL link for the button. 



Select the object in Frame 2 and choose 
Highlighted from the Button Preset pop-up on 
the Effect panel. Click Frame 3 on the Frames 
panel. Select the object and choose Inset from 
the Button Preset pop-up on the Effect panel. 
Likewise, click Frame 4, select the object, and 
choose Inverted from the Button Preset pop-up. 



5 Choose the Rectangle URL tool on the URLs 
toolbar. Choosing any tool on the URLs toolbar 
shows the URL overlay, where the document's 
URLs reside. Draw a URL object over the entire 
canvas. The new URL object is selected. Choose 
New Link from the Options pop-up. In the Link 
Info dialog box, type "http:// 
www.getfireworks.com" in the Link To field, type 
"Get Fireworks!" in the Browser Status Bar 
Message field, and then click OK. 

Optionally, click the Show/Hide URLs icon on the 
URLs toolbar to hide the URL overlay. 




6 Choose File > Export. On the Export Preview 
Options panel, choose GIF Rollover from the 
Format pop-up and check Optimized for file size 
reduction. Choose WebSnap Adaptive from the 
Palette pop-up and uncheck Dither. The file 
attributes are displayed above the preview. 

Note: When creating rollovers with the URL Slice 
tool, use the Object Properties dialog box to link and 
export rollovers. For more information, see 
"Creating a sliced image" on page 110. 



Choose an optimized GIF rollover and WebSnap Adaptive palette. 




7 Click Export to display the Export File dialog box. 
Choose a destination folder, name the file, check 
Generate HTML, and click Save (Windows) or 
Export (Macintosh). For each rollover state. 
Fireworks exports a separate GIF file and creates 
an HTML file containing the rollover JavaScript 
code. To learn more about creating and exporting 
rollovers, see "JavaScript rollovers" on page 1 17. 

Note: When this rollover is previewed in a browser, 
the Down state is not included. To learn how to 
preview all rollover states, see "The Down state" on 
page 117 and Fireworks Help. 
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Linking an image map 

Fireworks offers a convenient way for web designers to 
assign URLs to graphics. Use the familiar shape tools on 
the URLs toolbar to create hotspot regions with a 
specified link, status bar message, and target. Categorize 
links by assigning unique overlay colors. Generate 
image maps that are client-side, server-side, or both. In 
this lesson, create a client-side image map of a stylized 
solar system. 




1 Choose File > Open. In the Open File dialog box, 
navigate to the Tutorials folder within the 
Fireworks folder. Check Open as "Untitled," 
choose the Planets. png file, and click Open. 

This opens a graphic with a partially finished 
image map for http://www.gaze.com. If 
necessary, choose Window > Toolbars > URLs to 
display the URLs toolbar. 

n r MeteMc. jpr.-.,.- --- 3 ad 

Open the Planets.pngfile and display the URLs toolbar. 

Choose the URL Circle tool. Choosing a tool on 
the URLs toolbar activates the URL overlay. 

Locate the planet with the word "Forum" on it. 
Hold down Alt (Windows) or Option (Macintosh), 
click at the center of the planet, and drag from 
the center to draw a circle covering the planet. 
Release the mouse before releasing Alt or Option. 

If necessary, use the cursor keys to nudge the URL 
object into place. Leave the object selected. 





Use the URL Circle tool to create a URL object over a planet. 





Assign a new link for the URL object created. 



3 This circle defines the URL region linking the 
Forum planet to the current URL shown in the 
URLs toolbar. Choose New Link from the Options 
pop-up on the URLs toolbar to open the Link Info 
dialog box. 

In the Link to field, change the text to "http:// 
www.gaze.com/forum.html." Type descriptive 
text in the Browser Status Bar Message field to 
provide information that displays in the browser 
window's status bar. Choose "_blank" from the 
Target pop-up. 
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Airgw distinct overlay color for the forum link using your system 
color picker 




Click the Overlay Color color well in the Link Info 
dialog box. In the system color picker, choose a 
distinct color for this URL. Close the picker and 
click OK in the Link Info dialog box. 

The Forum hotspot is now linked to 
"http://www.gaze.com/forum.html." Choose 
Select > None to deselect the object. 



5 Choose the URL Polygon tool, and locate the 
planet with the words "StarGazer's Handbook." 
Click around the visible portion of the planet to 
draw a closed URL polygon. Assign a new link to 
the URL object by choosing 
"http://www.gaze.com/handbook.html" from the 
URL Link pop-up. Choose Select > None to 
deselect the object. 



Use the URL Polygon tool to create an irregularly shaped URL 
object. 




6 Click the Show/Hide URLs button on the URLs 
toolbar to deactivate the URL overlay. Choose the 
Pointer tool in the Toolbox and select the star 
partially behind the Events planet. Choose 
Select > Copy to URL. This creates a URL object 
that matches the shape of the original object. 



Select an object in the file and choose the Copy to URL command to 
make a URL object. 





Planets.htm PUnets.jpg 



Choose the type of image map you want to create before exporting 
The Client-side option produces two files ; an HTM and a JPG. 



7 Choose Image Map Options from the Options 
pop-up on the URLs toolbar to display settings. 
Choose Client-side from the Map Type pop-up 
and choose None from the Background URL pop- 
up. In the Alternate Image Description field, type 
a description for the image map that appears if 
the image fails to appear in the browser. Click OK 
to close the dialog box. 

Note: When exporting, check Generate HTML in 
the Export File dialog box to export both the image 
and the HTML file containing the image map. 
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Working with animation 

Fireworks streamlines the generation of one of the most 
popular web animation formats— the animated GIF. 
Create and edit objects and then place these objects on 
frames. Use the Export Preview dialog box to optimize 
GIF settings and to designate the pace of the animation, 
the method of transition between frames, and the 
number of times an animation repeats. 



L 
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1 Choose File > Open. In the Open File dialog box, 
navigate to the Tutorials folder within the 
Fireworks folder. Check Open as "Untitled," 
choose the Banner.png file, and click Open. 

If necessary, choose Window > Frames to display 
the Frames panel. When the file opens. Frame 1 is 
the active frame. Click Frame 2 through Frame 4 
on the Frames panel to view a different comet 
object on each frame. Frame 5 is blank. 



Open the Bannerpngfile. View frames using the Frames panel 

2 Finish Frame 5 in this document using the objects 
on Frame 4. Click Frame 4 to make it active, and 
choose Select > All to select all objects on that 
frame. From the Options pop-up on the Frames 
panel, choose Copy to Frames. Choose Next 
frame and click OK. Click Frame 5 to activate it 
and choose Select > None to deselect all objects. 





Copy objects from Frame 4 to Frame 5. 





Drag the comet core and head to define the last position in its course. 
Use the Redraw Path tool to extend the comet’s tail 



3 Choose the Pointer tool, hold down Shift, and 
select the comet's purple core and its white, star- 
shaped head. Drag these objects downward and 
to the right to continue the comet's course. 

Select only the comet's tail. Choose the Redraw 
Path tool from the Brush tool group. Move the 
tool over the right end of the tail until a plus sign 
appears next to the cursor. Drag toward the 
comet head to lengthen the comet's tail. 
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Select all objects on Frame 1 except the comet’s core and head, 
and drop these to the Background layer. 




Numberof 

colors 



4 Click Frame 1 to make it active and choose 
Select > All to select all objects on that frame. 
Choose the Pointer tool. Hold down Shift and 
click the comet's purple core and its white, star- 
shaped head to deselect these items. 

With everything else on Frame 1 selected, choose 
Select > Drop Selection to merge these objects 
with the Background image on the Background 
layer. Now all frames have the same starry 
backdrop for the moving comet. 



5 Choose File > Export to display the Export 
Preview dialog box. Choose Animated GIF from 
the Format pop-up and check Optimized. Choose 
Adaptive from the Palette pop-up. Type 100 in 
the Number of colors field and press Enter. 



Set color palette options for the animated GIF. 

Disposal method 6 Click the Animation tab. Select Frame 1 , hold 

down Shift, and click Frame 5 to choose all five 
Frame delay frames. Choose Unspecified from the Disposal 

Method pop-up. 

With all five frames selected, type 30 in the Frame 
Play once delay field to display each frame for 30 

hundredths of a second. Click the Loop button, 
L°°P and choose 5 from the Number of loops pop-up. 

Number of loops pop-up 




Choose a disposal method, a frame delay ; and a looping option. 

7 Click the Play button in the frame controls to 
H | ► I Hit i\ |J||| [4 _| preview the animated GIF. 

Click Export in the Export Preview dialog box to 
Play button display the Export dialog box. Type a file name 

and click Save (Windows) or Export (Macintosh) 
to export the animated GIF file. 

For more information about creating an 
animated GIF, see "Animated GIF" on page 113. 

Play the animated GIF in the Export Preview dialog box before 
exporting the file. 
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Creating and Editing a Graphic 



Object mode and image edit 
mode 

Computer graphics are one of two types: vector 
drawings created m an application such as Macromedia 
FreeHand, and bitmap images created m an application 
such as Adobe Photoshop. 

Paths are the basic elements of vector graphics. 
Generated mathematically, a path has at least two points. 
Each point joins path segments and point handles 
control the shape and length of adjacent segments. 

Pixels, the basic elements of bitmap graphics, are tiny 
squares that combine like the tiles of a mosaic to create 
an image. A bitmap image becomes more granulated as 
magnification reveals the individual pixels. 

Fireworks blurs the distinction between vector graphics 
and bitmap image graphics. The path of a Fireworks 
object has an editable vector path. Yet it may also have a 
wide, textured stroke, an image fill, and an effect such as 
a drop shadow, bevel, or glow. 

Magnifying any Fireworks object reveals pixels. Yet the 
objects pixels redraw m response to vector editing. Even 
effects— previously reserved for bitmap image 
applications— redraw after an object is edited. 

Fireworks has two basic modes— object mode and image 
edit mode. Object mode is the default mode, where 
vector graphic creation and some image manipulation 
occurs. Image edit mode is where pixel editing occurs 
within an image object or the background image, which 
is a permanent image m any Fireworks document. 



Fireworks drawing and editing tools 

The table below describes each tools basic function m 
each mode. Some tools work only m one mode, while 
others work m both. The behavior and characteristics of 
some tools change according to the current mode. Tools 
that behave exactly the same m either mode are not m 
this table. For detailed descriptions of tools, see “Toolbox” 
on page 7 and Fireworks Help. 



This tool 


In object mode 


In image edit mode 


Pointer 


Selects and moves 
paths on screen. 
Double-click an 
image to switch to 
image edit mode. 


Moves the image or 
moves pixels bound 
by a marquee. 


Select 

Behind 


Selects an object 
behind the selected 
object. 


Moves the image or 
moves pixels bound 
by a marquee. 


Crop 


Discards portions of 
a document. 


Is not available. 


Export 

Area 


Exports a portion of 
a document. 


Is not available. 


Sub- 

selection 


Selects and moves 
paths on screen, 
selects an object 


Moves the image or 
moves pixels bound 
by a marquee. 



within a group or 
Symbol, displays 
points on a path, 
and selects points. 



Marquee 
or Ellipse 
Marquee 


Is not available. 


Selects or moves a 
rectangular or 
elliptical area of 
pixels. 


Lasso or 
Polygon 
Lasso 


Is not available. 


Selects or moves a 
freeform area of 
pixels. 


Magic 

Wand 


Is not available. 


Selects an area of 
similarly colored 
pixels. 


Line, 

Pen, and 

Basic 

Shapes 


Draws objects as 
editable paths. 


Paints pixel brush 
strokes on an image 
object. 


Text 


Creates and edits 
text blocks and 
opens the Text 
Editor. 


Exits image edit 
mode, creates text 
blocks, and opens 
the Text Editor. 
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This tool 


In object mode 


In image edit mode 


Pencil 


Draws one-pixel 
pencil strokes as 
freeform paths. 


Draws one-pixel 
pencil strokes with 
no paths. 


Brush 


Draws brush 
strokes as paths. 


Paints brush strokes 
as pixels. 


Redraw 

Path 


Redraws a segment 
of a selected path 
or draws brush 
strokes as paths. 


Paints brush strokes 
as pixels. 


Freeform 


Pulls or pushes a 
selected path to 
reshape it. 


Is not available. 


Reshape 

Area 


Reshapes the parts 
of a selected path 
that lie within the 
Reshape Area 
cursor area. 


Is not available. 


Path 

Scrubber 


Alters a path's 
pressure and speed 
characteristics 
without changing 
its shape. 


Is not available. 


Eraser 

(Knife) 


Cuts a selected 
path into separate 
paths. 


Erases pixels from an 
image. 


Rubber 

Stamp 


Is not available. 


Clones portions of 
an image object. 



Object mode basics 

Activities m object mode include: 

♦ Drawing paths by dragging a basic shape tool or the 
Line tool, placing points with the Pen tool, or 
drawing a path with a pixel-wide stroke with the 
Pencil tool. 

♦ Drawing paths with a wide variety of brush strokes, 
including textures and patterns with the Brush tool. 

♦ Editing paths with the Freeform, Reshape Area, 
Redraw Path, Eraser, Path Scrubber, and other tools. 

♦ Editing paths by moving points and adjusting 
Bezier handles. 

♦ Typing and editing text. 



♦ Importing, positioning, and applying effects to 
bitmap images. 

♦ Importing and editing documents with vector 
graphics created m applications such as FreeHand. 

In object mode, paths and points are the basic elements 
of graphic design. Upon magnification, Fireworks brush 
strokes appear pixelated, as if painted m an image-editing 
application. Fireworks combines the editability of Bezier 
curves with the organic look of bitmap images m 
object mode. 

To place the brush stroke along the inside or outside of a 
path, choose Modify > Object Properties, then choose 
Inside or Outside from the Brush Stroke pop-up. For 
more information, see “Reorienting the brush stroke” on 
page 61 . 




A vector object with an A bitmap mage with a 

editable path and points. rectangular image 

bounding box. 

Brush strokes created m image edit mode may appear 
the same as those drawn m object mode, but they are 
strictly bitmap images. Conventional vector-editing 
techniques cannot edit these images. Working m image 
edit mode is similar to other image-editing applications 
with some enhancements. 
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Drawing paths 



Open and closed paths 

♦ Open — An open path has a beginning point and an 
ending point that do not connect. 

♦ Closed — A closed path has a beginning point and 
an ending point that connect. 





Open path Closed path 

A single path can overlap itself to create a loop that 
appears to enclose an area, but that is not a closed path. 
Only joined endpoints create a closed path. Either type 
of path can have a fill. Paths drawn with basic shape 
tools are closed paths. 

To resume drawing an existing open path, use the Pen or 
Redraw Path tool to click the ending point and continue 
the path. 

Completing open and closed paths 

To end an open path when using the Pen tool, double- 
click the Pen tool at the ending point when a small 
arrow appears next to the cursor. To end an open 
path when using other drawing tools, release the 
mouse button. 

To close a path with any drawing tool, return the cursor 
to the starting point of the path and click when a black 
square appears next to the cursor. 

When this square appears, 
release the mouse button to 
close the path. 




Use the Pen tool to draw paths by plotting points, as m 
FreeHand, or use the Brush tool to pamt paths, as m 
Photoshop. Either way, a brush stroke with a path and 
points is created when m object mode. 




Pen tool 




Brush tool 



Displaying and selecting paths 

All path objects m object mode are editable. The active 
tool and the status of the Hide Edges command 
determine which path and point information is 
displayed. 

♦ Displayed path and hidden points — Use the 

Pointer tool to drag a selection area around any part 
of one or more paths or click a path to select it. 




An object selected with the Pointer tool displays the 
path of the object without points 
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♦ Displayed path and points — Choose the 

Subselection tool to automatically display the points 
on all selected paths. Use the Subselection tool to 
drag a selection area around one or more paths, 
displaying the path and points of all selected objects, 
or click a path to select it. 




An object selected with the Subselection tool 
displays the path of the object with points 



♦ Hidden path and points — Choose View > 
Hide Edges to hide the paths and points of 
selected objects. 



A selected object displays no path 
when Hide Edges is checked. 



With Hide Edges checked, choosing the Subselection 
tool shows the points of selected objects without the 
path. 

Note: With Hide Edges checked, look at the Status bar 
(Windows) or Opacity toolbar (Macintosh) to identify 
the currently selected object. Hide Edges also hides 
marquees in image edit mode. 

To add more objects to a current selection, hold down 
Shift and select the additional objects. To select a path 
behind another path, use the Select Behind tool. 




Editing points to reshape paths 

Points are the framework for a vector path. The position 
and length of each point handle determines the shape 
and position of adjacent path segments. 




Subselection tool 



To select an individual point, use the Subselection tool. 
Either click individual points or drag a selection area 
around one or more points. To move a point, drag it with 
the Subselection tool. 

Fireworks has two point types: 

♦ Curve — Adjacent segments are curved. Clicking a 
curve point with the Pen tool converts it to a corner 
point, retracting the handles and straightening the 
adjacent segments. 

♦ Corner — One or both adjacent segments are 
straight lines. Clicking a corner point and dragging 
away from it with the Pen tool converts it to a curve 
point, extending the handles and curving the 
adjacent segments. 

To change the shape of an adjacent path segment, drag a 
point handle. The path preview shows the result of 
moving the handles. 




Point handle 
Subselection cursor 
Path preview 
Path 



Selected point 



Drag a point handle with the Subselection tool to edit 
adjacent path segments. 



Select Behind tool 
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If handles are not visible, drag from a point using the 
Subselection tool so that the point handles appear. 

To bend only one adjacent segment, leaving the other 
segment unedited, hold down Alt (Windows) or 
Option (Macintosh) and drag a point handle from the 
point with the Subselection tool. 

Drawing in object mode 

Draw paths m any of three ways: 



To both constrain a shape and draw from the 
centerpomt, hold down Shift-Alt (Windows) or Shift- 
Option (Macintosh) while using a drawing tool. 



The corner rounding percentage setting on the 
Rectangle Tool Options panel determines the 
curvature of the corners of rectangles drawn using the 
Rectangle tool. To assign a rounding percentage value 
to the corners of a rectangle, enter a value or use the 
slider on the Rectangle Tool Options panel before 
drawing the rectangle. 



♦ Use the Brush tool or Pencil tool to draw freeform 
paths. 

♦ Use the Line, Rectangle, Ellipse, or Polygon tool to 
draw paths by dragging. 

♦ Use the Pen tool to draw paths by plotting points. 

Drawing by dragging 



/ 



Use the Polygon tool to draw stars and other polygons. 
Use the Polygon Tool Options panel to set the number 
of sides, choose stars or shapes, and set angle acuteness. 





*- □ 



O 



o 



A five-point star 
with Angle = 
Automatic 



A five-sided 



An eight-point star 
with Angle = 10 



Line tool Basic shape tools 



To draw using the Line tool or a basic shape tool, hold 
down the mouse button to start a path, drag to draw, 
and release the mouse button to complete the path. 



Use Shift with the 


To constrain shapes to 


Rectangle tool 


Squares. 


Ellipse tool 


Circles. 


Polygon tool 


Polygons oriented at 
increments of 45 degrees. 


Line tool 


Lines at increments of 45 
degrees. 



Drawing by plotting points 

To draw using the Pen tool: 

1 Choose the Pen tool. 

2 Click to plot corner points. 

Press and hold the mouse button on a point, then 
drag to draw curves. 

3 End the path. 

♦ To end an open path, double-click the last point 
when a small arrow appears next to the cursor. 



To draw a basic shape from a specific centerpomt, hold 
down Alt (Windows) or Option (Macintosh) and 
drag a drawing tool. The Polygon tool always draws 
from a centerpomt. 
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♦ To end a closed path, click the starting point 
when a solid square appears next to the cursor. 




Point handle 



Path preview 
Pen cursor 



Draw paths with the Pen tool by plotting point by point. 



To move the brush stroke of one or more objects 
inside or outside the path: 

1 Select one or more objects. 

2 Choose Modify > Object Properties. 

3 Choose Inside or Outside from the Brush Stroke 
pop-up and click OK. 

Checking Draw Fill over Brush m the Object 
Properties dialog box fills selected objects all the way to 
the paths. With this option checked, opaque fills may 
obscure the brush strokes inside paths. Fills with a 
degree of transparency may tint or blend with brush 
strokes inside paths. 



Reorienting the brush stroke 

An objects brush stroke is centered on the path by 
default, but options for placing the brush stroke 
completely inside or outside the path are available. 




Editing in object mode 

In addition to dragging point handles, several Fireworks 
tools edit paths m object mode. 




The Freeform , Reshape Area, Path Scrubber, Path Redraw, 
and Eraser (Knife) tools are the object mode editing tools 
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This cursor 


Indicates 


kto 


The Freeform tool or the Reshape Area 
tool is in use. Move onto a selected 
path to activate the pull cursor. Click 
and hold away from a selected path to 
activate the push cursor or reshape 
cursor. 


l* s 


The Freeform tool is in use. The pull 
cursor is in position to pull the 
selected path. Click and hold the 
mouse and drag to reshape the path. 




The Freeform tool is in use. The pull 
cursor is pulling the selected path. 
Release to redraw the path. 


O 


The Freeform tool is in use. The push 
cursor is active. Push the selected path 
with the adjustable circle to reshape 
the path. 


o 


The Reshape Area tool is in use and the 
cursor is active. Drag the area of the 
selected path under the cursor. The 
area from the inner circle to the outer 
circle represents reduced strength. 




The Redraw Path tool is in use. The 
redraw path cursor is on a selected 
path to be redrawn. 


y 


The Path Scrubber tool is in use. The 
path scrubber plus cursor is active. 
Trace a brush stroke to change the 
path's pressure- or speed-sensitive 
data. 


V 


The Path Scrubber tool is in use. The 
path scrubber minus cursor is active. 
Trace a path to change the path's 
pressure- or speed-sensitive data. 


J 


The knife cursor is active. Drag the 
knife line across the selected path to 
cut it into two or more paths. 




The Freeform tool pulls a path segment 






The Freeform tool The path redraws to 

pushes a path segment. reflect the push. 




♦ Reshape Area tool — Pull the area of a selected 
path within the outer circle of the Reshape Area 
cursor. On the Tool Options panel, enter a value m 
the Size field or use the pop-up slider to set the size 
of the reshape area cursor. Enter a value m the 
Strength field or use the pop-up slider to set the size 
of the inner circle of the reshape area cursor. The 
inner circle is the boundary of the tool at full 
strength. The area between the inner and outer 
circle reshapes paths at less than full strength. 

♦ Path Redraw tool — Redraw a segment of a 
selected path, retaining the brush, fill, and effect 
characteristics of the path. 

A A 
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♦ Freeform tool — Push or pull any part of a selected 
path. Fireworks automatically adds, moves, or 
deletes points along the path as you edit it. On the 
Tool Options panel, enter a value m the Size field or 
use the pop-up slider to set the size of the push 
cursor and the length of the path segment the pull 
cursor affects. 



The Path Redraw tool redraws a path segment. 

♦ Eraser (Knife) tool — Drag the knife cursor across 
a selected path to slice it into two or more paths. 

See Fireworks Help for more information about 
these tools. 
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Switching to and from image edit mode 

Although graphics created in object mode may have 
bitmap image characteristics, Fireworks also has a mode 
specifically for editing bitmap images pixel by pixel. In 
image edit mode, each pixel of a selected image object or 
the background layer is editable. 

Note: An image imported in object mode remains an 
image. A vector object can be converted to an image by 
choosing Select > Convert to Image. 



To 


Do this 


Edit an image 
object 


Select the object, and then 
choose Modify > Image Object 




or 




Double-click the object using 
the Pointer tool. 


Create a new 
image 


1. Choose Edit > Create Empty 
Image. 

2. Drag to define the size of the 
image object. 


Edit the 

Background image 


Choose Modify > Background 
Image 




or 




Click the Background layer in 
the Layers panel. 




A striped border surrounds the selected mage object or the 
Background in image edit mode 



Return to object mode from image edit mode m any of 
three ways: 

♦ Move the cursor beyond the striped border until the 
cursor becomes a stop cursor, and then click the 
mouse button. 



m 

Stop cursor 

♦ Click the Stop button on the Status bar (Windows) 
or on the Opacity toolbar (Macintosh) . 



'Eft ;-Ho4i 



m 



Click the Stop button to exit image edit mode. 



♦ Choose Modify > Exit Image Edit. 

♦ Choose ControEShift-D (Windows) or 
Command-Shift-D (Macintosh). 

Image edit mode basics 

Switch to image edit mode to directly edit pixels m an 
image or m the Background. Activities m image edit 
mode include: 

♦ Creating and editing images for the web. 

♦ Editing images imported from the web. 

♦ Editing pixels with the Pencil tool. 

♦ Replicating image elements with the Rubber 
Stamp tool. 

♦ Painting m color with the Brush tool. 

♦ Erasing to transparency or to another color. 

♦ Applying Xtra filters to pixel selections. 

♦ Editing imported GIFs, JPEGs, and PNGs. 

♦ Creating composite images. 

Fireworks has up to 100 undo steps, which are available 
m both image edit mode and object mode. The default 
Number of Undo steps preference is 8. 
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Selecting an image object 

Each bitmap image m Fireworks has a rectangular 
bounding box. This box is highlighted when an image is 
selected m object mode with View > Hide Edges 
unchecked. To switch to image edit mode, double-click 
the image. 

The Background layer image 

The Background layer is a permanent image stretching 
across the entire canvas under which no objects or layers 
can be placed. It is editable only m image edit mode. The 
Background layer is shared across all frames m an 
animation. For more information about frames, see 
‘Animated GIF” on page 113. 

♦ Choosing Select > Drop Selection drops selected 
objects onto the background layer. Dropped objects 
become part of the background image, losing their 
status as individual, editable objects. 

♦ Choosing Select > Flatten Fayers drops all objects— 
paths and images— onto the Background layer. 

All objects on all layers become part of the 
Background image, losing their status as individual, 
editable objects. 

Using marquees 

In image edit mode, the primary selection tools are the 
Marquee and Ellipse Marquee tools, the Fasso and 
Polygon Fasso tools, and the Magic Wand tool. 




Marquee tools 



IF 




Lasso tools 



Use these tools to highlight an area of pixels to edit, 
move, cut, or copy. Each draws a marquee that becomes 
a flickering dotted shape when complete. To remove a 
marquee, draw another one, choose Select > None, or exit 
image edit mode. 



Use this tool 


To 


Marquee 


Highlight a rectangular area of 
pixels. 


Elliptical 

Marquee 


Highlight an elliptical area of 
pixels. 


Lasso 


Highlight a freeform area of pixels. 


Polygon Lasso 


Highlight an area of pixels bound 
by a polygon. 


Magic Wand 


Highlight an area of pixels of 
similar color. 



Note: Hold down Shift to draw square or circular 
marquees or to constrain lasso lines to 45-degree 
increments. Hold down Control (Windows) or Option 
(Macintosh) to draw from the centerpoint. 




An object in mage edit mode with a circle marquee 



For more information about the Marquee and Fasso 
tools, see Fireworks Help. 
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Converting an object to an image 

Convert one or more selected objects to an image object 
m any of three ways: 

♦ Choose Select > Convert to Image, which converts 
selected objects into a single image object. 

♦ Choose Select > Drop Selection, which drops all 
selected objects to become part of the Background 
layer image. 

♦ Choose Select > Flatten Layers, which drops all 
objects from all layers to become part of the 
Background layer image. 

A path-to-image conversion is irreversible, except when 
choosing Edit > Undo is still an option. 

Note: Flatten Layers is not available in documents with 
multiple frames. 

Using Xtras 

The Xtras menu has effects that are not reversible. Once 
these effects are applied to an object, the object is no 
longer editable and becomes a floating image object. 
Fireworks Xtras include Blur, Invert, and Sharpen. 

Photoshop plug-ms also work m Fireworks. Copy 
Photoshop plug-ms into the Fireworks Xtras folder 
to add them to the Xtras menu. Alternatively, use 
the Preferences dialog box to target an additional 
plug-m folder. 

For more information about Xtras, see Fireworks Help. 



Transforming and distorting objects 

Use the Transform tools or menu items to scale, rotate, 
distort, and skew an object, a group of objects, or a pixel 
selection area. 




Transform tools 



Choosing any Transform tool or menu item displays the 
transform handles. The handles frame the entirety of 
selected objects. In image edit mode, the transform 
handles frame the pixel selection. 




Transformation handles 



Center point 



Original object 




Skewed Distorted 

Drag any transform handle to edit the selected objects 
interactively. The cursor changes to indicate the available 
activity. 
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When dragging a transform handle in transform mode 
hold down Alt (Windows) or Option (Macintosh) to 
scale objects bi-directionally from the centerpomt. 

When moving the cursor beyond the handles m 
transform mode to rotate selected objects interactively: 

♦ Hold down Shift to constrain rotation. 

♦ Drag the round centerpomt away from the center of 
the handles to relocate the axis of rotation. 

When dragging a transform handle m distort mode: 

♦ Hold down Shift to constrain handle movement to 
45-degree angles. 

♦ Hold down Control (Windows) or Command 
(Macintosh) to achieve the illusion of perspective 
(corner handles only). 

♦ Hold down Alt (Windows) or Option 
(Macintosh) to distort the object symmetrically 
relative to the axis point. 

When moving the cursor beyond the handles m distort 
mode to skew the object, hold down Alt (Windows) or 
Option (Macintosh) to skew the object relative to the 
centerpomt. 

To move the centerpomt back to the center of the 
transform handles, hold down Shift and Alt-double- 
click (Windows) or Option-double-click (Macintosh) 
the centerpomt. 

To scale or rotate selected objects, images, and pixel 
selections, choose Modify > Transform > Numeric 
Transform. 

For more information about the Transform tools and 
transform menu items, see Fireworks Help. 



Using color 

Use the Color Mixer and the Swatches panel to create or 
choose colors for Fireworks brush strokes, fills, and 
effects. 



Check to apply a color to the brush color well. 
Check to apply a color to the fill color well. 

si- Choose a color model. 
Create a color. 



Pick a color. 

Check to apply a color 
automatically. 



Click to switch brush and fill colors. 

Click to restore default brush and fill colors. 




Color Mixer 




Add, replace, save, clear, 
or sort swatches, or 
choose a palette. 

Choose a swatch. 



Click to add the active swatch to the 
palette. 



Swatches panel 
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Using the Color Mixer 

By default, the Color Mixer identifies colors as RGB, 
displaying a color’s values of red (R), green (G), and blue 
(B) color components. RGB values are calculated based 
on a range from 0 to 255. 

To create a color in the Color Mixer: 

1 Choose Window > Color Mixer, if necessary, to 
display the Color Mixer. 

2 Click either the brush color well or fill color well, 
or display the Brush, Fill, or Effect panel, to 
choose the destination for the new color. 

3 Check or uncheck Auto-Apply. 

♦ Checking Auto-Apply applies the color to the 
displayed current color well and all selected 
objects as the color is mixed. 

♦ Unchecking Auto-Apply retains current colors 
until you manually apply the new color. 

4 Choose a color model from the Color Mixer 
Options pop-up, if necessary. 

5 Enter values in the color component fields or 
use the pop-up sliders, or pick a color from the 
color bar. 

The cursor becomes the eyedropper cursor when it 
moves over the color bar. Click to pick a color. Deselect 
all objects before mixing a color to prevent unwanted 
object editing as you mix colors. 

Choose alternative color models from the Color Mixer 
Options pop-up. The current color’s component values 
change with each new color model. 



Choose To express color components as 

RGB Values of Red, Green, and Blue, 

where each component has a 
value from 0 to 255, where 0-0-0 is 
black and 255-255-255 is white. 

Hexadecimal Values of Red, Green, and Blue, 
where each component has a 
hexadecimal value of 00 to FF, 
where 00-00-00 is black and 
FF-FF-FF is white. 



Choose To express color components as 

HSB Values of Hue, Saturation, and 

Brightness, where Hue has a value 
from 0 to 360 degrees, and 
Saturation and Brightness have a 
value from 0 to 100 percent. 

CMY Values of Cyan, Magenta, and 

Yellow, where each component 
has a value from 0 to 255, where 
0-0-0 is white and 255-255-255 is 
black. 

Grayscale A percentage of black. The single 

Black (K) component has a value of 
0 to 100 percent, where 0 is white 
and 100 is black, and in between 
are shades of gray. 



Clicking the color bar while holding down Control 
(Windows) or Option (Macintosh) toggles the color 
bar through the RGB, Hexadecimal, and Grayscale color 
models. The Color Mixer fields do not change. 

Note: When the Hexadecimal color bar is displayed, 
color choices are restricted to the Web 216 palette. 

To take a color from the document and put it into the 
Color Mixer, click the color using the Eyedropper tool. 
The highlighted color well displays the color and the 
Color Mixer displays the component values. To 
immediately apply the color to all selected objects, hold 
down shift while clicking the Eyedropper tool. 

Viewing color information 

The Info bar displays the component values of the color 
at the current cursor location. Choose an alternate Info 
bar color model m the Info bar Options pop-up. 




Choose the color model and unit of 
measure for the Info bar. 



View the color and alpha opacity 
values of the color under the cursor. 



The Info bar displays information about the color at 
the current cursor location. 
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Using the Swatches panel 

Choose Window > Swatches to display the Swatches 
panel, which contains the current color palette, or group 
of available color choices. Click a color swatch to choose 
a brush, fill, or effect color for selected objects and objects 
to be drawn later. 

Note: The Swatches panel displays the current 
Fireworks palette, not the current document's palette. 

When the cursor points to a swatch, it becomes one of 
three Eyedropper tool icons. Clicking a swatch 
automatically assigns that color to the active color well 
and applies the color to the brush stroke, fill, or effect of 
all selected objects. 



This eyedropper 


Applies a color to 


A 


The brush color well and the 
brush stroke of each selected 
object. 


A 


The fill color well and the fill of 
each selected object. 


A 


The effect color well and the 
effect of each selected object. 



By default, the Swatches panel contains the Web 216 
color palette. Choose alternative color palettes or 
customize a palette using the Swatches panel Options 
pop-up. 

Customizing palettes 

To add the active color to the current palette: 

1 Move the cursor to the open space after the last 
swatch on the Swatches panel. 

The cursor becomes the pamt bucket cursor. 

2 Click to add the swatch. 

Note: Choosing Edit > Undo does not undo swatch 
additions or deletions. 



To replace a swatch with the active color: 

1 Hold down Shift and point to a swatch. 

The cursor becomes the pamt bucket cursor. 

2 Click the swatch. 

The active color replaces the original swatch. 

To delete a swatch from the palette: 

1 Hold down Control (Windows) or Command 
(Macintosh) and point to a swatch. 

The cursor becomes the scissors cursor. 

2 Click the swatch to delete it. 

To clear the entire Swatches panel, choose Clear 
Swatches from the Swatches panel Options pop-up. 

To append a palette to the current palette: 

1 Choose Add Swatches from the Options pop-up. 

A File dialog box opens. 

2 Choose a palette file. 

Fireworks adds swatches from either of two types of 
files: Photoshop ACO palette files and GIFs. The 
new swatches are appended to the end of the 
current swatches. 

To revert a color palette to its original swatches, reselect 
the color palette from the Options pop-up. 

To save a custom palette, choose Save Palette from the 
Swatches panel Options pop-up, and then either name 
the new palette or leave the previous name to replace the 
original palette. 

To use the current custom color palette from the Export 
Preview dialog box, choose Current Export Palette from 
the Swatches panel Options pop-up. 

Note: Except when displaying Current Export Palette, 
the Swatches panel is unrelated to the Export Preview 
swatch display. For more information about swatches on 
the Export Preview dialog box, as well as optimizing 
color palettes, see "Options panel" on page 97. 
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System color pickers 

Double-clicking any color well displays the Windows 
Color dialog box (Windows) or the Apple Color Picker 
(Macintosh). Colors created using either of these 
methods bypass the Color Mixer and Swatches panel. 

Using color wells 

The current brush and fill colors are displayed m the 
brush and fill color wells on the Color Mixer. Duplicate 
color wells appear m the Toolbox. 




Click to activate the brush color well 



Click to activate the Fill color well. 

The Fill color well is shown as active. 

Click to switch the colors in the brush 
and fill color wells. 



Click to reset to the default brush and 

fill colors specified in the Preferences. 

The brush and fill color wells and the color well buttons 
appear in both the Color Mixer and the Toolbox 



To activate the 


Do this 


Fill color well 


Click the color well with the paint 
bucket next to it in the Toolbox or 
in the Color Mixer 




or 




Click the Fill tab on the Brushes 
and Fill panel. 


Effect color well 


Click the Effect tab on the Brushes 
and Fill panel. Neither the Toolbox 
nor Color Mixer has an Effect 
color well. Some effects do not 
use color. 



To swap colors so that the brush color becomes the fill 
color and the fill color becomes the brush color, click 
the Switch Colors button m the Color Mixer or m 
the Toolbox. 

To reset to the default colors, click the Default Colors 
button. Specify default colors using the General > “Color 
Defaults” preferences. 

Note: When the Effect panel is open, neither the brush 
color well nor the fill color well is active in the Toolbox 
or the Color Mixer. 



In addition, a duplicate brush color well appears on the 
Brush panel and a duplicate fill color well appears on the 
Fill panel. An Effect color well appears on the Effect 
panel when color is an element of the effect. 



To activate the Do this 



Brush color well Click the color well with the brush 
next to it in the Toolbox or in the 
Color Mixer 

or 

Click the Brush tab on the Brushes 
and Fill panel. 



Applying color to the canvas 



The canvas is the bottom surface, below the Background 
layer. Specify a canvas color in either of two ways: 



♦ 



♦ 



When opening a new document, choose White, 
Transparent, or Custom m the New Document 
dialog box. To choose a canvas color using the 
system color picker, click the Custom color well. 



With an existing document, choose Modify > 
Document > Canvas Color, and then choose White, 
Transparent, or Custom. To choose a canvas color 
using the system color picker, click the Custom 
color well. 
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Applying brushes and fills The Brush P ane| 



Use the Brush panel to choose a brush stroke and to 
apply a brush stroke to selected objects. Use the Fill 
panel to fill selected objects and subsequently drawn 
objects. Use the Brush panel Options pop-up and Fill 
panel Options pop-up to adjust brush and fill settings 
and to create and save custom brushes and fills. 
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Brush panel 



Fill panel 



The Brush panel and Fill panel are the control center for 
creating brush strokes and fills. Save your favorite brush 
and fill settings to use again. Add your own PNG files 
to the appropriate Fireworks Settings folder, re-launch 
Fireworks, and use them as custom brush and fill 
textures and patterns. 

Saving a brush only saves it for use within the current 
document. To reuse a saved brush m another document, 
copy and paste an object with the saved brush stroke 
into the document. The saved brush is added to the 
Brush panel for use within the document. 

For more information on adding textures, see 
Fireworks Help. 




Choose a brush category. 
Choose a specific brush. 






Save, edit, rename, and 
delete brushes. 



Alter brush edge. 

Alter brush size. 

Change intensity of the 
brush texture. 

Choose a brush texture. 
Show current brush shape. 

Alter brush color. 

Preview brush stroke. 



Manually apply changes to 
selected drawn paths. 



Check to automatically apply 
changes to selected paths. 



The Brush tool is the primary freeform drawing tool m 
Fireworks. The Pen tool is the primary Bezier 
curve drawing tool. Use either to create paths with a 
wide range of possible characteristics m both object 
mode and image edit mode, from thm, pencil-like 
paths to wide swaths resembling spray pamt or 
splattered oil. A variety of brush textures add to the 
range of creative possibilities. 




Brush tool 



Pen tool 



Extensive brush editing features offer full control of 
every brush nuance, including ink amount, tip size 
and shape, edge effect, and aspect. Also, sensitivity 
settings control how a pressure-sensitive pen affects 
brush strokes. 
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The brush stroke preview at the bottom of the Brush 
panel shows the current brush with the current settings. 
A stroke m the preview that tapers or fades or otherwise 
changes from left to right illustrates the current pressure- 
and speed-sensitivity settings. 

A newly created brush stroke assumes the current color 
displayed m the brush color well, whether m object 
mode or image edit mode. 

Using the Edit Brush panels 

Choose Edit Brush from the Brush panel Options 
pop-up to display the Edit Brush panels: Options, 
Shape, and Sensitivity. 




Preview the brush tip shape. 

Check for a square brush tip. 

Set the brush tip size, edge 
softness, tip aspect, and tip 
angle. 

Preview the brush stroke. 



Edit Brush Shape panel 



Set ink amount, 
spacing, and flow rate. 
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Overlap brush stamps for 
dense strokes. 

Set brush texture amount. 

Set texture on the edges. 

Choose an edge effect. 

Set the number of tips. 

Set spacing of multiple tips. 

Choose the color variation 
between multiple tips. 




Assign the brush 
property for sensitivity 
data to control. 

Set the degree to which 
sensitivity data affects the 
current brush property. 



Preview the brush stroke. 



Edit Brush Sensitivity panel 



Saving brush settings 

Any change to brush settings is saveable. Use the Brush 
panel Options pop-up to save brushes, change brush 
characteristics, rename the current brush, or delete the 
current brush. 

Saving a brush only saves it for use within the current 
document. To reuse a saved brush m another document, 
copy and paste an object with the saved brush stroke 
into the document. The saved brush is added to the 
Brush panel for use within the document. 
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The Fill panel 

Fireworks fill categories are None, Solid, Pattern, and 
various gradient shapes. Combine fill types with 
textures to quickly create complex artwork. 

Save, edit, name, and 
delete gradients. 

Choose a fill category. 

Choose Anti-Alias, Hard 
Edge, or Feathered edge. 

Control edge feathering. 

Choose a fill texture and 
intensity and control 
transparency. 

Alter fill color. 



Manually apply changes 
to selected paths. 

Check to automatically apply 
changes to selected paths. 

Preview fill. 
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Choosing Edit Gradient opens the Edit Gradient dialog 
box. Choose a preset Gradient from the Preset Options 
pop-up. Click an area under the color ramp to add color 
wells. Double-click any color well to pick a color from 
the system color picker. Add as many colors to the color 
ramp as you want. 




Editing a fill with the Paint Bucket tool 

Choose the Paint Bucket tool to quickly edit a selected 
objects fill. 



Fill panel 



Paint Bucket tool 



A newly created closed path drawn with the Pen tool or 
basic shape tools assumes the current fill displayed m the 
Fill panel. Paths drawn with other drawing tools have a 
default fill of None. 

Editing and saving a gradient color ramp 

All fill categories other than None, Solid, and Pattern 
are Gradient fills. Use the Fill panel Options pop-up to 
edit, save, rename or delete the current Gradient. 

Saved fills are stored only within the current document. 
To reuse a saved fill m another document, copy and paste 
an object with the saved fill into the other document. 
The saved fill is added to the Fill panel. 



♦ When the Fill panel has a fill of None or Solid, 
clicking inside the object with the Pamt Bucket tool 
adds the color m the fill color well as a Solid fill. 

♦ When the Fill panel has a Pattern or Gradient fill, 
clicking the Pamt Bucket tool places the round 
pamt bucket handle, which represents the center or 
starting point of the fill. 

♦ When choosing a new Pattern or Gradient fill type 
m the Fill panel, clicking inside a selected object 
applies the new fill type to the object. 
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Adjusting a fill interactively 



Adding texture 



To change or distort a selected object’s Pattern or 
Gradient fill, choose the Paint Bucket tool. An L-shaped 
or linear set of handles appears on or near the object. Use 
these handles to adjust the object’s fill. 



Drag to 
adjust fill 
width and 

skew. Drag to 

place a fill's 
center or 

first color. Drag to 
adjust fill 
angle. 

1 i 

\ / 




Use the Paint Bucket tool bandies to interactively adjust a 
Pattern or Gradient fill. 



Both the Brush panel and the Fill panel have an option 
for adding a texture to the brush stroke or fill. 




transparency. 

The Texture name pop-up displays a preview of the 
highlighted texture. 



The Amount of texture field next to the Texture name 
pop-up controls the depth of the texture from 0 to 100 
percent. Lower percentages result m lighter texture and 
higher percentages result m heavier texture. 

On the Fill panel, check Transparent to make the light 
parts of the texture transparent. 



The round starting handle specifies the starting point of 
the fill. Drag the starting handle to move the fill within 
the object without changing the size, width, skew, or 
an gle of the fill. 

The ending handle represents the ending point of the fill. 
The distance between the ending handle and the width 
handle sets the fill angle. Dragging the ending handle 
does not move the other handles. The width handle 
represents both aspect (or width) and skew. 
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Applying effects to objects 

Use the Effect panel and Xtras menu commands to 
enhance graphics with many Live Effects and filters. 
Easily achieve common web effects such as Bevel, Glow, 
Drop Shadow, and Emboss, which previously involved 
labor-intensive procedures. Alter images with Xtra filter 
effects such as Blur, Unsharp Mask, and Invert. 

Live Effects 

Live Effects are pixel-based effects that apply to path, 
image, and text objects and redraw to reflect subsequent 
editing. Applying a live effect does not permanently 
change the original object. 

♦ The object to which the effect is applied remains 
editable. 

♦ The effect itself remains editable and removable. 




For example, create a button by applying an Outer Bevel 
effect on the button itself and apply Drop Shadow to the 
text on the button. The button shape and the text on the 
button all remain fully editable. 




Outer Bevel effect 




Drop Shadow effect 




Emboss effect 




Glow effect 
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To apply an additional effect to an object: 



Save, edit, name, and 
delete effects. 



Choose an effect category. 
Choose a specific effect. 

Set effect-specific 
options such as width, 
contrast, and softness. 



Choose bevel appearance. 
Preview the effect. 



Click to manually apply 
changes to selected 
objects. 

Check to automatically apply 
changes to selected objects. 




1 Apply the first effect and leave the object 
selected. 

2 Choose Modify > Group. 

The object and the effect are grouped as an object 
that can receive another effect. 

3 Apply another effect. 

Add as many effects as you want using this method. 
Grouped objects, including text, are still editable. 
The multiple effects redraw accordingly. 

Use the Effect panel Options pop-up to save custom 
effect settings, rename an effect, and delete an effect. 

Saved effects are stored only within the current 
document. To reuse a saved effect m another document, 
copy and paste an object with the saved effect into 
the other document. The saved effect is added to the 
Effect panel. 



Effect panel 

To apply an effect to an object: 

1 Select the object. 

2 Choose the effect from the Effect panel. 

3 Adjust Effect characteristics, viewing the results 
in the Effect preview. 

4 Click Apply, unless Auto-Apply is checked. 

To edit an effect: 

1 Select the object. 

2 Adjust effect characteristics in the Effect panel. 

3 Click Apply, unless Auto-Apply is checked. 

Use Modify > Group to apply more than one Live Effect 
to an object. Consider the order of effect application 
when applying more than one effect to an object. 



Using Subselect or Superselect with effects 

When applying various effects to a group, masking 
group, or Symbol: 

♦ Choose Select > Subselect to select all objects within 
a selected group, masking group, or Symbol. 

♦ Choose Select > Superselect to select the group, 
masking group, or Symbol that contains the 
selected object. 

Using Xtras 

The Xtras menu has effects that are not reversible. Once 
these effects are applied to an object, the object is no 
longer editable and becomes a floating image object. 
Fireworks Xtras include Blur, Invert, and Sharpen. 

Photoshop plug-ms also work m Fireworks. Copy 
Photoshop plug-ms into the Fireworks Xtras folder 
to add them to the Xtras menu. Alternatively, use the 
Preferences dialog box to target an additional 
plug-m folder. 

For more information about Xtras, see Fireworks Help. 
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Using text 

Add text using the Text tool and the Text Editor. Apply 
brush strokes, fills, and effects to text. Edit text and its 
brush, fill, and effect attributes redraw accordingly. 



A 



Text tool 



In Fireworks, text is neither a path nor an image. Text 
initially has no brush stroke and has an anti-aliased edge. 
However, a brush stroke can be added and edges can 
be changed to hard-edged or feathered using the Brush 
and Fill panel. A text block is a moveable and 
resizable object. 



To edit text, double-click a text block. Within a single 
block of text, you can vary all aspects of text, including 
size, font, spacing, leading, baseline shift, and more. To 
resize a text block, pull any text block selection handle. 

To use Type 1 fonts on the Macintosh, Fireworks 
requires Adobe Type Manager 4 or higher. 

Note: Anti-aliasing on text is controlled on the Fill panel, 
as it is with paths. 




Drag any text block handle to 
resize a text block. 



Text block 



Text is convertible to an image or to paths; however, 
converting text renders it uneditable as text. 

To enter text: 

1 Choose the Text tool and click the canvas. 

The Text Editor opens. 

2 Choose font, size, spacing, and other text 
characteristics. 

3 Type the text. 

4 Click OK or press Enter. 

The text appears m a text block m the Fireworks 
document. 

5 Resize and move the text block with the Pointer 
tool. 

6 Add a brush or effect, or change the fill. 
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Using the Text Editor 

The Text Editor is where you enter and edit text and 
change text attributes. Select all or part of the text m the 
Text Editor preview area and apply changes. 



To view the results of changes m the document, move 
the Text Editor so that the selected text block is visible, 
then click Apply to see the changes without closing the 
Text Editor. 



Orient text horizontally or vertically. 



Choose fonts from the Font pop-up. 



Adjust point size. 

Apply Bold, Italic, or Boldltalic. 



Adjust leading. 

Adjust kerning or 
range kerning. 

Adjust horizontal scale. 
Adjust baseline shift. 



Type and edit text. 



Check to show actual 
fonts and sizes in the 
Text Editor. 




Set the direction of text 
flow as left to right or 
right to left. 



Set text block alignment to 
Left, Center, Right, Justified, 
or Stretched. 



Resize the Text Editor. 



Attaching text to a path To edit text attached to a path, double-click the text-and- 

path object to open the Text Editor. 

To place text on a path: 

1 Select a text block and a path. 

2 Choose Text > Attach to Path. 

3 Optionally, choose Text > Orientation, then 
choose an orientation option. 

Choose any of four orientation options for text on a 
path: Rotate around Path, Vertical, Skew Vertical, or 
Skew Horizontal. 



Creating and Editing a Graphic 77 



To edit the shape of the path, choose Text > Detach from 
Path to detach the text from the path and edit the path. 
After editing the path, select it and the text block and 
choose Attach to Path. 




Horizontal text on a path 
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Vertical text on a path with 
Vertical Orientation 



A path to which text is attached temporarily loses its 
brush, fill, and effect attributes. Subsequently applied 
brush, fill, and effect attributes are applied to the text, not 
the path. A path regains its brush, fill, and effect 
attributes when text is detached from it. 

If text attached to an open path exceeds the length of the 
path, the remaining text returns and repeats the shape of 
the path. 

Macro. 

F' re M/ 0 ^ia 

Text on a path returns and repeats the path shape 



To move the starting point of text attached to a 
path: 

1 Select the text-and-path object. 

2 Choose Modify > Object Properties. 

3 Enter a value in the Text Offset field. 

A negative offset value is valid when text is attached to a 
closed path or when text is center aligned. The attached 
text s alignment and flow— set m the Text Editor— affects 
the outcome of Text Offset. For more details, see 
Fireworks Help. 

Converting text to paths and images 

After text is converted into an image object or to paths, it 
is no longer editable as text. The conversion is 
irreversible, except when Edit > Undo is available. 

To convert text to paths: 

1 Select the text. 

2 Choose Text > Convert to Paths. 

Text converted to paths retains all of its properties and is 
now editable only as paths. However, you can apply 
effects to the new paths. 

To convert text to an image object: 

1 Select the text. 

2 Choose Select > Convert to Image. 

Text converted to an image object retains its current 
appearance. 
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Organizing your document 

Fireworks has several features that help organize a 
document as it grows more complex. 

♦ Group and ungroup individual objects. 

♦ Arrange objects behind or in front of other objects. 

♦ Arrange, lock or unlock, and show or hide layers. 

♦ Organize layers and frames within a document. 

♦ Arrange frames. 

Grouping objects 

Grouping two or more selected objects freezes their 
positions and stacking order relative to one another, so 
you can manipulate them as a single object. Objects 
within a group retain their individual characteristics, 
unless you modify the entire group. 





Group selected objects as a single object 



To group two or more selected objects, choose 
Modify > Group. To ungroup, select the group and 
choose Modify > Ungroup. 

Note: To apply another Live Effect to an object that 
already has a Live Effect applied to it, group the object, 
then apply the next effect to the group. For example, 
apply an Emboss effect to a letter, group the letter, then 
apply a Drop Shadow effect. 



To work with individual objects within a group, either 
ungroup the objects or use the Subselection tool to 
subselect only the objects you want to modify. 
Modifying attributes of a subselected object changes 
only the subselected object and not the entire group. 
Subselected objects cannot be moved to other layers. 





When working with a group, masking group, or 

Symbol: 

♦ Choose Select > Subselect to select all objects within 
a selected group, masking group, or Symbol. 

♦ Choose Select > Superselect to select the group, 
masking group, or Symbol that contains the selected 
object. 

Arranging objects on a layer 

Arranging objects on the same layer 



To 


Do this 


Move an object 


Select the object and choose 


forward on the 


Modify > Arrange > Move 


same layer 


Forward. 


Move an object 


Select the object and choose 


to the front of 


Modify > Arrange > Bring to 


a layer 


Front. 
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To 


Do this 


Move an object 


Select the object and choose 


backward on 


Modify > Arrange > Move 


the same layer 


Backward. 






Move an object 


Select the object and choose 


to the back of 


Modify > Arrange > Send to 


a layer 


Back. 



n* i# 



Use the Arrange commands to change the stacking 
order of objects. However, you may not see a change m 
the stacking order if the objects are not overlapping. 



The active layer is highlighted. Drawn, imported, or 
pasted objects initially reside on the active layer. 



Choose a different frame. 




Add, duplicate, rename, 
and delete layers. Hide 
and show layers. Lock 
and unlock layers. 

Drag to move selected 
objects to another layer. 

View and rearrange the 
stacking order of layers. 



Lock or unlock a layer. 
Show or hide a layer. 



Layers panel 



Using layers 

Layers divide a Fireworks document into discrete 
planes, as though the graphic components were drawn 
on separate tracing paper overlays. Each object m a 
graphic resides on a layer. Create all layers before you 
draw or add them as needed. 




The background layer is always at the bottom of the 
stacking order. Only objects on visible, unlocked layers 
are editable. The canvas is below the background layer, 
but it is not actually a layer. 



To show or hide the Layers panel choose Window > 
Layers. The Layers panel shows the current state of all 
layers m the current frame of a document. 

♦ Drag a layer name to rearrange the stacking order. 
The order of the list reflects the stacking order of the 
layers. 

♦ Click the square m the first column to the left of a 
layer name to show or hide that layer. A show/hide 
icon indicates that a layer is visible. 

♦ Click the square m the second column to the left of 
a layer name to lock that layer. A padlock indicates 
that a layer is locked. Objects on a locked layer are 
not editable until the layer is unlocked. 

♦ Drag the square icon up or down the list to move 
selected objects from one layer to another. 

Use the Options pop-up to add, duplicate, rename, 
remove, hide or show, and lock or unlock layers. Check 
Single Layer Editing to restrict editing to the current 
layer. 

Use the Current Frame pop-up or the Previous Frame 
and Next Frame buttons to navigate among frames. 
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Hiding a layer hides all objects on that layer, but does 
not remove them from the document. Showing a layer 
shows all objects on that layer. A hidden layer cannot be 
an active layer. 

Note: URLs reside on the URL overlay. To display URLs, 
click the Show/Hide button on the URLs toolbar. For 
more information, see "Creating an image map" on 
page 109. 

Hiding selected objects from view 

To hide all selected objects, select them and then choose 
View > Hide Selection. Locked objects remain locked 
when hidden. Hide Selection does not hide guides. 

To show all hidden objects, choose View > Show All. 
Hidden objects remain hidden when the document is 
closed and reopened. 

Using frames 

Frames comprise the structure for an animated 
Fireworks document. Each frame within a document is 
the same size and has the same layers m the same order 
as the other frames. The Background layer is shared by 
all frames. 



Add, duplicate, or delete frames using the Frames panel 
Options pop-up. Use Copy to Frames to copy the 
current selection and paste it into the frame specified m 
the Copy to Frames dialog box. Use Distribute Selection 
to distribute all selected objects across frames according 
to the stacking order from bottom to top. 

For more information about using frames for animation, 
see Animated GIF” on page 113. For more information 
on using frames for rollovers see “JavaScript rollovers” on 
page 117. 







± 1 - 



9 



Add, duplicate, and 
delete frames; copy to 
frames; or distribute 
the selection. 



Frames panel 



To show or hide the Frames panel choose Window > 
Frames. Frames are automatically named m numerical 
order beginning with Frame 1. 
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Symbols and Instances 

Use Symbols and Instances to simplify Fireworks 
animations and improve editability. Instances are 
representations of an original Fireworks object, which is 
designated as the Symbol. When the Symbol object (the 
original) is modified, the Instances (the copy) 
automatically change to reflect the modifications to the 
Symbol. 

Use Symbols and Instances to: 

♦ Simplify modifications to existing animations by 
changing only the Symbol object and having the 
Instance objects update automatically. 

♦ Easily modify complex illustrations containing 
multiple copies of objects. 

♦ Share components across rollover states. 

Creating a Symbol 

Create a Symbol from any object, text, or group. Choose 
Edit > Symbols > Make Symbol to turn selected objects 
into a Symbol. To add objects to an existing Symbol, 
select the Symbol and the objects and choose Edit > 
Symbols > Add to Symbol. Symbols cannot include 
Instances and other Symbols. 




A plus icon represents a 
Symbol object. 



Creating an Instance 

Create an Instance using any of these methods: 

♦ Copy and paste a Symbol. 

♦ Duplicate a Symbol. 

♦ Clone a Symbol. 

♦ Choose a Symbol and select Copy to Frames from 
the Frames panel. 

♦ Alt-drag (Windows) or Option-drag (Macintosh) 
a Symbol. 




An arrow icon represents 
an Instance object. 



Modifying a Symbol 

Modify a Symbol to automatically modify all associated 
Instances. Symbols behave as groups when modified or 
transformed. For example, apply different Live Effects to 
components within a Symbol by subselectmg objects 
and using the Effect panel. For more information on 
modifying opacity within grouped objects, see “Opacity 
toolbar” on page 12. 

Modifying an Instance 

Instance object modifications are limited to 
transformations, opacity, blending modes, and Live 
Effects. When applied to an Instance, transformations 
and Live Effects do not affect an Instances Symbol 
object. Changes to an Instance are automatically 
reapplied when its Symbol is modified. 
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Working with Symbols and Instances 



To 



Do this 



Create a Symbol Select an object or group of 
objects and choose Edit > 
Symbols > Make Symbol. 

Add items to an Select the Symbol and the 

existing Symbol items and choose Edit > 

Symbols > Add to Symbol. 



Create an Instance Copy and paste, duplicate, or 
clone a Symbol or Instance 

or 

Select a Symbol and choose 
Copy to Frames from the 
Frames panel 

or 

Press Alt (Windows) or Option 
(Macintosh) after you begin 
dragging a Symbol. 



Delete all Instances Select the Symbol and choose 
while retaining a Edit > Symbols > Delete 

Symbol Instances 



or 

Select the Symbol, choose 
Edit > Symbols > Break Link, 
then choose Delete from the 
resulting dialog box. 



Delete a Symbol and Delete the Symbol and 

all associated confirm in the resulting dialog 

Instances box to delete all Instances. 



Break the link 
between a Symbol 
and its Instances 



Select the Symbol, choose 
Edit > Symbols > Break Link, 
and then choose Group from 
the resulting dialog box. The 
Instances are retained as 
unlinked groups. 



Find a Symbol for a Select an Instance and choose 
particular Instance Edit > Symbols > Find 
Symbol. 



Move a Symbol and Select the Symbol, choose 
its Instances Select > Subselect, and move 

simultaneously the contents of the Symbol. 



Tweening 

Choose Edit > Symbols > Tween Instances to blend a 
Symbol and one or more of its Instances, creating 
interim Instance objects with transitional attributes. 
This is known as tweening. Alternatively, tween two or 
more Instances without using a Symbol. 

Instance objects created by tweening derive attributes 
from the Symbol or Instance objects used. For 
example, tween a vertical Symbol with a horizontal 
Instance to produce Instance objects that rotate 
progressively to form a blend from the vertical object to 
the horizontal object. 

Tweening can apply to these object characteristics: 

♦ Transformations — Tween between objects with 
different rotation, scaling, or skew transformations. 

♦ Opacity — Tween between opacity settings. 

♦ Live Effects — Tween between settings of the same 
Live Effects. 







Tweened from 100% opacity to 25% opacity 



Note: Symbol and Instance functions are available only 
in object mode. 
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To tween: 



Compositing 



1 Select objects to be tweened. 

Select a Symbol and one or more of its Instances 
or select two or more Instances of the same 
Symbol object. 



Compositing is the process of varying the transparency 
or color interaction of two or more overlapping objects 
to create a variety of graphic elements. 



2 Choose Edit > Symbols > Tween Instances. 



Using the Opacity toolbar 



3 Enter the number of tween steps in the Tween 
Instances dialog box and click OK. 

Check Distribute to frames to distribute the 
tweened objects to separate animation frames. 



Adjust opacity. 



Choose a blending mode. 



□ 




El 



Opacity toolbar 



Use the Opacity toolbar to adjust the opacity of selected 
objects and to apply blending modes. A setting of 100 
renders an object completely opaque. A setting of 0 
renders an object completely transparent. 

On the Macintosh, the Opacity toolbar also displays 
selected-object information. In image edit mode, a Stop 
button appears on the Opacity toolbar. Click the Stop 
button to leave image edit mode. 

Using blending modes 

Blending modes manipulate the color values of 
overlapping objects to create effects. They also add a 
dimension of control to the opacity effect. 

Choosing a blending mode applies it to the entire 
appearance of selected objects. Objects within a single 
document or a single layer can have blending modes that 
differ from other objects within the document or layer. 
To set a default blending mode for newly drawn objects, 
choose Select > None and then choose a blending mode. 

When objects with different blending modes are 
grouped, the individual blending modes are overridden 
by the group’s blending mode. Ungroupmg the objects 
restores the objects’ individual blending modes. 
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A blending mode has four elements: 

♦ Blend color — The color or colors of the object to 
which the blending mode is applied. 

♦ Opacity — The opacity of the object to which the 
blending mode is applied 

♦ Base color — The color of pixels underneath the 
blend color. 

♦ Result color — The result of the blending mode’s 
effect on the base color or colors. 



Choose To 



Normal 


Apply no blending mode. 


Multiply 


Multiply the base color by the 
blend color, resulting in darker 




colors. 


Screen 


Multiply the inverse of the blend 
color by the base color, resulting in 
a bleaching effect. 



Choose 


To 


Color 


Combine the hue and saturation of 
the blend color with the luminance 
of the base color to create the 
result color, preserving the gray 
levels for coloring monochrome 
images and tinting color images. 


Luminosity 


Combine the luminance of the 
blend color with the hue and 
saturation of the base color to 
create the result color. 


Invert 


Invert the base color to create the 
result color. 


Tint 


Add gray to the base color to 
create the result color. 


Erase 


Remove all base color pixels, 
including those in the background 
image, to reveal the canvas color. 



Blending mode behavior 



Darken Select the darker of the blend color 

and base color to use as the result 
color. This color replaces only 
pixels that are lighter than the 
blend color. 

Lighten Select the lighter of the blend 

color and base color to use as the 
result color. This color replaces 
only pixels that are darker than the 
blend color. 



Difference Subtract the blend color from the 
base color or the base color from 
the blend color. The color with less 
brightness is subtracted from the 
color with more brightness. 

Hue Combine the hue value of the 

blend color with the luminance 
and saturation of the base color to 
create the result color. 



♦ 



♦ 



♦ 



♦ 



In object mode, a blending mode affects the 
selected object. 



In image edit mode, a blending mode affects the 
floating selection of pixels. 



In image edit mode without a floating selection, a 
blending mode affects the brushes and fills of 
subsequently drawn objects. 

The effect of a blending mode m image edit mode 
describes how new pixels blend against other pixels 
m the same image. 



For more information on blending modes, see 
Fireworks Help. 



Saturation Combine the saturation of the 
blend color with the luminance 
and hue of the base color to create 
the result color. 
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Masking 

A mask group has two primary uses, both of which are 
available m Fireworks: 

♦ Pasting an object inside another object, so that the 
enclosing object continues to be visible. This is 
known as a paste inside or clipping path m 
FreeHand. Cropping an image to the shape of an 
object is a typical application of a paste inside. 



♦ Pasting an object inside another object, so that the 
enclosing object is not visible and the alpha of each 
pixel m the enclosing object becomes part of the 
window into the paste inside objects. This is known 
as a layer mask m Photoshop. A typical application 
of a mask is to create an alpha transparency from an 
image arranged in front of another image so that the 
image behind shows through the lighter portions of 
the image m front. 




Paste inside 




Maskgroup 
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To create a mask similar to a paste inside: 

1 Position the object to be pasted in front of the 
destination path. 

2 Cut the object to the Clipboard. 

3 Select a path inside which the object on the 
Clipboard is to be pasted. 

4 Choose Edit > Paste Inside. 

The object on the Clipboard is pasted inside the 
selected object m the same position from which it 
was cut. 

To create a mask similar to a layer mask: 

1 Select two or more objects. 

2 Choose Modify > Mask Group. 

Mask Group uses the top objects alpha to mask the 
objects. 

Choose Modify > Object Properties to determine the 
masking method using the Object Properties dialog box. 

Note: The top object need not be a path for this type of 
masking. It can be an image. 

Editing objects within a mask group 

Subselect objects within a mask group to edit or 
move them. Use the Subselection tool or double-click 
the mask group handle to select the contents of the 
mask group. 

♦ To convert a paste inside into a mask group, select 
the paste inside, choose Modify > Object Properties, 
and then check Clip to Top Objects Image. 

♦ To convert a mask group into a paste inside, select 
the mask group, choose Modify > Object Properties, 
and then check Clip to Top Objects Path. 

For more information on mask groups, see the tutorial 
“Masking objects” on page 43 and Fireworks Help. 



Creating alpha for mask groups 

Choose Xtras > Other > Convert to Alpha to convert an 
object into a grayscale image object with transparency, 
and then use the object as an alpha mask. Place the 
converted object over other objects, such as text or 
photographs, to mask them. 
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CHAPTER 4 

Importing and Exporting 
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Fireworks in the workflow Importing 



Although Fireworks greatly reduces the need for other 
applications within the graphic creation workflow, it is 
highly compatible with other applications associated 
with producing web graphics. 

♦ Import graphics created m applications such as 
FreeHand or Photoshop, and edit them using 
familiar tools and similar document-organization 
features such as layers and frames. 

♦ Export optimized graphics, HTML, and JavaScript 
for use m Dreamweaver or m a web browser. 

♦ Import and export a wide variety of file formats. 

♦ Use Export Preview to quickly determine the best 
balance of size and quality for your exported 
graphics without switching to and from a browser. 

♦ Batch process all files within a folder and name and 
save export presets. 



Import graphics or text m any of four ways: 

♦ Import 

♦ Open 

♦ Drag and drop 

♦ Copy and paste 



Import File dialog box 



To import a graphic using the Import File dialog 
box: 



1 Choose File > Import. 

2 Select a file and click Open. 

When available, a preview of the selected file is 
shown along with file information such as file type 
and file size. 



3 Position the import cursor where you want the 
upper-left corner of the object to appear. 

4 Click the mouse button to place the object at its 
default size. Click and drag to scale the object. 

Imported bitmap images are placed as image objects. 
For more information about image objects, see 
“Image edit mode basics” on page 63. 
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Fireworks can import these formats: 

♦ PNG 

♦ GIF 

♦ JPEG 

♦ PICT (Macintosh) 

♦ BMP 

♦ TIFF 

♦ xRes LRG 

♦ ASCII 

♦ RTF 

♦ Adobe Photoshop 3, 4 

♦ Adobe Illustrator 7 

♦ Macromedia FreeHand 7 8 

♦ CorelDRAW/ 

Drag and drop 

Drag and drop objects, images, or text into Fireworks 
from any application that supports OLE Drag and 
Drop (Windows) or Macintosh Drag and Drop 
(Macintosh), such as: 

♦ Macromedia FreeHand / 8 

♦ Macromedia Flash 2, 3 

♦ Adobe Photoshop 4 

♦ Adobe Illustrator 7 

♦ Microsoft Office 97 (Windows) 

♦ Microsoft Internet Explorer 3, 4 

♦ Netscape Navigator 3, 4 

♦ CorelDRAW 7 (Windows) 

To drag and drop into Fireworks: 

1 Select a graphic in another application and drag 
it over an open Fireworks document. 

2 Position the cursor where you want to drop the 
selection and release the mouse button. 



Copy and paste 

Objects that are pasted into Fireworks from another 
application are centered m the active document. When 
using copy and paste, Fireworks accepts these formats 
from the Clipboard: 

♦ FreeHand / 8 

♦ Illustrator 

♦ PNG 

♦ PICT (Macintosh) 

♦ DIB (Windows) 

♦ BMP (Windows) 

♦ ASCII text 

Resampling 

Resampling adds pixels to or subtracts pixels from a 
resized image to match the appearance of the original 
image as closely as possible. Resampling an image to a 
higher resolution typically causes little data or quality 
loss. Resampling to a lower resolution always causes data 
loss and a drop m quality. 

When pasting an image with a resolution that differs 
from the destination Fireworks document, Fireworks 
displays a dialog box asking if the image is to be 
resampled: 

♦ Click Resample to maintain the pasted data’s 
original width and height, adding or subtracting 
pixels as necessary. 

♦ Click Don’t Resample to keep all the original pixels, 
which may make the relative size of the pasted 
image larger or smaller than expected. 
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Pasting 

Each edit mode handles pasted data differently: 

♦ In object mode, pasting a pixel selection yields a 
rectangular image object, which uses alpha 
transparency to maintain the appearance of the 
selection. 

♦ In image edit mode, pasting a vector graphic or 
image object pastes a pixel selection that remains 
floating until it is deselected. When deselected, the 
selection becomes part of the current image. 

For a comparison of object mode and image edit modes, 
see “Object mode and image edit mode” on page 36. 

Importing text 

Import text into Fireworks using the same methods for 
importing graphics. Fireworks imports two text formats: 
RTF (Rich Text Format) and ASCII (plain text). 

RTF 

Choose File > Open or File > Import to import RTF text. 
When RTF text is imported, Fireworks maintains these 
attributes: 

♦ Font 

♦ Size 

♦ Style (bold, italic) 

♦ Alignment (left, right, center, justified) 

♦ Reading 

♦ Baseline shift 

♦ Range kerning 

♦ Horizontal scale 

♦ First character’s color 

All other RTF information is ignored. 

Note: Fireworks cannot import RTF text using copy and 
paste or drag and drop. 



ASCII 

Import ASCII text using any of the four import 
methods. Imported ASCII text is set to the default font, 
12 pixels high, and uses the current fill color. 

Importing Fireworks files 

Import saved Fireworks files into the current drawing 
layer of an active Fireworks document. The following 
happens when importing a Fireworks file: 

♦ The background layer of the imported file is placed 
as an image object. 

♦ URFs are placed on the URF overlay. For more 
information about URFs, see “Creating an image 
map” on page 109. 

♦ Fayers within the imported file are merged. 

♦ In files with multiple frames, only the first frame 
is imported. 

Imported objects from a Fireworks file are selected when 
they are first imported so they may be easily grouped or 
moved immediately after import. 



92 Chapter 4 



Importing FreeHand, Illustrator, or 
CorelDRAW files 



Import objects or files from Macromedia FreeHand, 
Adobe Illustrator, or CorelDRAW using any four of 
the import methods. When opening or importing a 
vector-based file, use the Vector File Options dialog box 
to define specific settings. Vector File Options do not 
apply when pasting or dragging. 




Scale — Specify the scale percentage for the imported file. 

Width and Height — Specify m pixels the width and 
height of the imported file. 

Resolution — Specify the resolution of the imported file. 



File Conversion — Specify how multipage documents 
are handled when imported. 

♦ Open a page — Import only the specified page. 

♦ Open pages as frames — Import all the pages 
from the document, and place each on a separate 
frame m Fireworks. 

♦ Remember layers — Maintain the layer structure 
of the imported file. 

♦ Convert layers to frames — Place each layer of 
the imported document onto a separate frame m 
Fireworks. 

Include Invisible Layers — Import objects on layers 
that have been turned off. Otherwise, invisible layers 
are ignored. 

Include Background Layers — Import objects from 
the document s background layer. Otherwise, the 
background layer is ignored. 

Render as images — Rasterize complex groups, blends, 
or Tiled fills and place them as a single image object m a 
Fireworks document. Enter a number m the field to 
determine how many objects a group, blend, or Tiled fill 
can contain before it is rasterized during import. 

Anti-aliased — Anti-alias imported objects. 

Note: Use Modify > Edge after importing to change 
selected objects to Anti-Alias or Hard Edge. 

Importing Illustrator files 

The following vector file import options are not 
available when importing Illustrator files: 

♦ File Conversion > Page options. 

♦ File Conversion > Include Background layers. 

♦ Render as images > Blends over <number> steps. 
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Importing CorelDRAW files 

Fireworks can import CDR files that have been created 
with CorelDRAW 7 for Windows. The following 
vector file import options are not available when 
importing CDR files: 

♦ File Conversion > Include Background layers. 

♦ Render as images > Blends over <number> steps. 

♦ Render as images > Tiled Fills over <number> objects. 

Note: Fireworks cannot open or import compressed 
CDR files. 

Because CorelDRAW supports a different set of 
features than Fireworks, the following changes occur 
when importing CDR files: 

♦ Master pages — The contents of the Master Pages 
are cloned onto each Fireworks frame. 

♦ Blends — Fireworks only imports the two end 
objects of the CorelDRAW blend. The objects are 
grouped after import. 

♦ Dimensions — Converted to vector objects. 

♦ Text — Only basic text is imported. Most character 
and paragraph parameters are unsupported. 

For more information about importing CorelDRAW 
CDR files, see Fireworks Help. 

Importing animated GIFs 

Choose File > Open to import animated GIFs. When 
opening an animated GIF, Fireworks places each frame 
of the animated GIF on a separate frame m the 
Fireworks document. Also, Fireworks creates a 
Background layer based on the common pixels found m 
all the imported frames. 

For more information about editing and exporting 
animated GIFs, see Animated GIF” on page 113. 



Exporting 

Finding a good balance between quality and speed 
when exporting a graphic for use on the web is often a 
daunting task. Fireworks offers several methods to help 
develop the best quality graphics with the lowest file 
size possible. 

Fireworks exports graphics through these methods: 

♦ Drag and drop 

♦ Copy and paste 

♦ Export 

♦ Export Area tool 

♦ Export Slices 

♦ Export Again 

For more information on Export Slices, see “Slicing 
images when exporting” on page 110. 

To export a graphic: 

1 Choose File > Export to display the Export 
Preview dialog box. 

2 Choose setting. 

3 Click Export. 

4 In the Export dialog box, type a name for the file, 
select the destination, and click Save (Windows) 
or Export (Macintosh). 

Choose File > Export Again to quickly export a file using 
its previous export settings. Export Again bypasses the 
Export Preview dialog box. 
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Using Export Preview 

Use the Export Preview dialog box to try different 
settings for the chosen file format, compare the effects of 
different color palettes and transparencies, customize 
palettes and animation settings, and preview the file 
pixehfor-pixel as it will be exported. 



Choose a format. 



Check to optimize 
the exported graphic. 



Choose a color 

depth. — 

Choose a color 
palette. 



Enter a maximum number of colors for the exported file. 
Click to edit, save, or load a palette. 

Preview area 
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Check to dither 
the image. 

Preview and 
edit the colors 
in the image's — 
palette. 

Choose the 
type of 
transparency. 

Enter the index 
number of the — | 
transparent 
color. 

Use frame — | M | H | h | 

controls to ” L- * -J 
preview frames 
or play an 
animated GIF. 



Use the 
Magnification 
tool to magnify 
the preview 
area. 



Choose the number of 
views shown in the 
preview area. 



Click to launch the 
Export Wizard. 



Add to or remove 
colors from the 
transparency. 
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Preview area 



The preview area displays the graphic exactly as it will be 
exported and estimates file size and download time with 
the current export settings. 




Choose a saved set of options for 
the selected export preview. 



Click to save the export settings 
used in the active view. 



Check to 
previewthe 
results of 
the chosen 
export 
settings. 



View and 
compare 
file size 
and 
download 
time 
estimates 
for the 
related 
preview. 



Preview area of the Export Preview dialog box 



When exporting animated GIFs or JavaScript rollovers, 
the estimated file size is a total of all frames. 

For more information about animated GIFs, see 
‘Animated GIF” on page 113. For more information 
about JavaScript rollovers, see “JavaScript rollovers” on 
page 117. 

Split view 

Click a button to divide the preview area into one, 
two, or four previews. Each preview window can 
display a preview of the exported graphic with different 
export settings. 



Magnification and pan control 

Choose the Magnify tool, and then click to magnify the 
preview. Alt-click (Windows) or Option-click 
(Macintosh) to zoom out. 

Choose the Pointer tool and drag within a preview 
to pan. 

When multiple previews are open, all previews are 
magnified to the same level and all previews pan 
simultaneously to display the same portion of the image. 

Saving export presets 

Save Export Preview dialog box settings for use m future 
exports or m batch processing. 

To save export presets: 

1 Choose settings in the Export Preview dialog box. 

2 Click the " + " in the preview area of the Export 
Preview dialog box. 

3 Type a name for the export preset and click OK. 

The preset is saved m the Fireworks\Settmgs\Export 
Settings folder. 

To apply saved export presets to a preview, choose a 
preset from the Export Presets pop-up m any 
preview area. 

To delete an export preset, remove or delete its file 
from the Fireworks\Settmgs\Export Settings folder. 



Because each preview accurately reflects the exported 
graphic, you can use split views to compare different 
settings and create the smallest file size while 
maintaining an acceptable level of quality. 
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Options panel 

Use the Options panel to choose file format and format- 
specific settings for exporting. Although some settings 
are common to many formats, other settings are unique 
to a single format. For more information about format- 
specific settings, see “Web export formats” on page 101, 
and Fireworks Help. 




Format 

Select the file format for the exported image. Fireworks 
exports the following formats: 

♦ GIF 

♦ Animated GIF 

♦ GIF Rollover 

♦ JPEG 

♦ JPEG Rollover 

♦ PNG 

♦ TIFF 

♦ xRes LRG 

♦ BMP 

♦ PICT (Macintosh) 



Color depth 

Color depth is the number of colors used m the exported 
graphic. Although most web images are created m 8-bit 
color (256 colors), Fireworks exports some formats with 
24-bit and 32-bit depths. 



Bit depth 


Maximum 
number of colors 


Fireworks export 
formats that 
support this bit 
depth 


1-bit 


2 colors 


GIF, PNG, PICT, 
TIFF 


8-bit 


256 colors 


GIF, PNG, PICT, 
BMP, TIFF 


24-bit 


16.7 million 
colors (millions) 


JPEG, PNG, PICT, 
BMP, LRG, TIFF 


32-bit 


16.7 million 
colors and an 8- 
bit alpha 
channel 


PNG, LRG, TIFF 



Higher color depths create larger exported files, and are 
typically not ideal for web graphics. Use 24-bit or 32-bit 
color depths when exporting photographic images with 
continuous tones or complex gradient blends of colors. 

Palette 

Color palettes are preset groups of colors used m an 
exported graphic. Palettes contain up to 256 colors. 

When exporting with a Bit Depth of 8 Bit Indexed, 
choose a palette from the Palette pop-up. 

These palettes are available by default: 

Adaptive — A custom palette derived from the actual 
colors m the document. 

WebSnap Adaptive — An adaptive palette m which 
colors that are near m value to browser-safe colors are 
converted to the closest browser-safe color. 

Web 216— A palette of the 216 colors common to both 
Windows and Macintosh computers. This palette is 
often called a browser-safe palette, because it produces 
fairly consistent results on different platforms and with 
different browsers. 
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Exact — A palette containing the exact colors used m the 
image. Only images with 256 colors or less may use the 
Exact palette. If the image contains more than 256 
colors, the palette reverts to Adaptive Global. 

System (Windows) and System (Macintosh) — Each 
palette contains the 256 colors as defined by the 
Windows or Macintosh platform standards. 

Grayscale — A palette of 256 or fewer shades of gray 
that converts the image to grayscale. 

Black and White — A two-color palette that converts 
the image to black and white. 

Uniform — A mathematical palette based on RGB pixel 
values. 

Custom — A palette that has been modified or loaded. 
Choose Load Palette from the Export Preview Options 
pop-up to load a palette. 

Number of Colors pop-up 

When using a palette, enter a number m the Number of 
Colors pop-up to set the maximum number of colors 
contained m the exported image. The number below the 
entry field displays the actual number of colors used m 
the image. Create smaller files by reducing the number 
of colors. 



N1] 
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Number of Colors pop-up on the Options panel of 
the Export Preview dialog box 



Palette display area 



If a color palette is selected, the colors used m the palette 
appear m the palette display area. 



Colors specified as 
transparent are marked with 
an X. 




RGB color Hexadecimal 

values color value 



1 

Index value 



i-sdb.113 



To view the color value of a pixel, move the cursor over 
the pixel. 

To save a Custom color palette: 

1 Choose Save Palette from the pop-up next to the 
Format pop-up. 

2 Type a name for the palette and choose a 
destination folder. 

3 Click Save. 

The saved palette file can be loaded into the 
Swatches panel or used when exporting other 
documents. 

Edit a palette by choosing Add Color, Delete Color, or 
Replace Color from the Options pop-up on the Options 
panel of the Export Preview dialog box. 

Dither 

Use dithering to approximate colors not m the current 
palette. Dithering is especially useful when exporting 
images with complex blends or gradients or when 
exporting photographic images. 

Note: Dithering can greatly increase file size, especially 
the size of a GIF. 

To dither the exported image, check Dither m the 
Export Preview dialog box, then enter a number m 
the Dither Amount field. Higher numbers increase 
dithering. 
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Optimize 

Check Optimize to create the smallest file with the least 
number of colors. 

Transparency 

Use the Transparency tools on the Options panel to 
specify which colors are transparent m exported GIFs or 
PNGs. Transparent colors are indicated with an X m 
the Palette Display. In the preview area, transparent 
colors do not appear. A gray and white checkerboard 
denotes transparent areas. 

None — No transparency is saved with this file. 

Index Color — Select a color or colors for the 
transparency using the transparency eyedropper tools. 
By default, this color is the document’s canvas color. 

Alpha Channel — Choose to use a document’s alpha 
channel to define transparency. Only PNGs support 
alpha transparency. For more information about alpha 
channels, see “Transparency” on page 115. 

Index Number field 

The Index Number field displays the palette index 
number of the color currently specified as transparent. 
Enter a new number to specify a different color for 
transparency, or click a color m the palette display. The 
index number of the specified color appears m the field. 



Transparency eyedropper tools 

Use the transparency eyedropper tools to add or remove 
colors from the transparent area of the exported image. 
Changing transparency does not affect the original 
image. It only affects the exported image. 



Use 



To 



Select 

Transparency tool 




Select a single color for 
transparency by clicking in the 
preview area or the palette 
display. 



Add to 

Transparency tool 




Add colors to the transparency 
by clicking in the preview area 
or palette display. 



Subtract from 
Transparency tool 




Remove colors from the 
transparency by clicking in the 
preview area or palette display. 



Interlaced 

Check to make the exported GIF or PNG interlaced. 
When viewed m a web browser, interlaced images 
quickly appear at a low resolution and then transition to 
full resolution as they continue to download. 



Importing and Exporting 99 






File panel 

Use the File panel to set the scale of the exported 
document. 



Export Area 

Use the Export Area tool to export a part of a Fireworks 
graphic. 




Scale 

The Scale settings increase or decrease the size of the 
image when exporting. Use either of two scaling 
methods: 

♦ Enter a percentage or choose from the pop-up slider 
to increase or decrease the exported image size by a 
percentage. The W and H pixel dimensions update 
automatically. 

♦ Enter numbers m the W and H fields to scale the 
graphic to a specific pixel width and height. 

Check Constrain to keep width and height proportional 
when scaling. 

Animation panel 

Use the Animation panel when exporting an 
animated GIF. 

For more information on exporting animated GIFs, 
see ‘Animated GIF” on page 113. 





rl — Export Area tool 






\4 




d 





To export a portion of a document: 

1 Choose the Export Area tool from the Toolbox. 

2 Click and drag a marquee over the portion of the 
document to export. 

When you release the mouse button, the export area 
remains highlighted by a marquee. Drag any of 
eight marquee handles to resize the export area. 

♦ Hold down Shift while dragging to resize the 
export area marquee proportionally. 

♦ Hold down At (Windows) or Option 
(Macintosh) while dragging to resize the 
marquee from the center. 

♦ Hold down At-Shift (Windows) or Option- 
Shift (Macintosh) while dragging to constrain 
the proportions and resize from the center. 

3 Double-click inside the export area marquee or 
click the Export button on the Tool Options panel 
to open the Export Preview dialog box. 

The Export Preview dialog box displays the area 
defined by the export area marquee. 

4 Adjust settings in the Export Preview dialog box 
and click Export. 

5 In the Save as (Windows) or Export (Macintosh) 
dialog box, type a file name and choose a 
destination folder, then click Save (Windows) or 
Export (Macintosh). 

To cancel without exporting, double-click outside the 
export area marquee, press Esc, or select another tool. 
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Web export formats 

GIF, JPEG, and PNG are graphic file formats that are 
common m web development because they are highly 
compressible, making for faster transfer across the 
Internet. However, a graphic’s visual integrity can 
vary from one format to another, depending upon 
each format’s method of compression. Therefore, base 
your choice of file format upon the design and use of 
your graphic. 

GIF 

Graphics Interchange Format, or GIF, is the most 
popular web graphic format. Although it can contain 
only 256 colors, GIF offers good, lossless image 
compression. Also, GIFs can contain a transparent area 
and multiple frames for animation. 

For more information about animated GIFs, see 
“Animated GIF” on page 113. 

Compression 



Compression 

JPEG is a lossy format, which means that some image 
data is discarded when it is compressed, reducing the 
quality of the final file. However, image data can often be 
discarded with little or no noticeable difference m 
quality. When exporting a JPEG, use the Quality pop- 
up slider m the Export Preview dialog box to determine 
how much quality is lost when compressing the file. 

♦ Use a high percentage setting to maintain image 
quality but compress less, producing larger files. 

♦ Use a low percentage setting to yield a small file, but 
produce a lower-quality image. 

Use the Export Preview dialog box to test and compare 
the appearance and estimated file size with different 
Quality settings for an exported JPEG. 

Smoothing 

Use smoothing to help lower the file size of JPEGs. 
Smoothing blurs hard edges, which do not compress 
well m JPEGs. 



Lossless compression means that no image quality is lost 
when an image is compressed. A GIF compresses by 
scanning horizontally across a row of pixels, finding solid 
areas of color, and then abbreviating identical areas of 
pixels m the file. Therefore, images with repetitive areas 
of solid color compress best when saved as GIFs. A GIF 
is usually ideal for cartoon-like graphics, logos, graphics 
with transparent areas, or animation. 

Note: Dithering or anti-aliasing GIF images produces 
larger files. 

JPEG 

JPEG is an alternative to GIF developed by the Joint 
Photographic Experts Group specifically for 

images. JPEG supports millions of colors 



photographic 

(24-bit). 



To use smoothing, select a level from the Smoothing 
pop-up m the Export Preview dialog box. Higher 
numbers produce more blurring m the exported JPEG, 
typically creating smaller files. 

Progressive 

Check Progressive m the Export Preview dialog box to 
export a progressive JPEG. Progressive JPEGs, like 
interlaced GIFs, display at low resolution and then 
increase m quality as they continue to download. 
Making a JPEG progressive also reduces its file size. 

The JPEG format is best for scanned photographs, 
images using textures, images with gradient color 
transitions, or any images that require more than 
256 colors. 
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PNG 

The Portable Network Graphic, or PNG, is the most 
versatile of the web graphic formats. However, not all 
web browsers can take full advantage of PNG 
characteristics. A PNG supports up to 32-bit color, 
can contain transparency or an alpha channel, and can 
be progressive. 



Compression 

PNG compression is lossless, even m high color depths. 
It compresses across rows and columns of pixels, yielding 
better compression than GIF, which only scans rows. A 
PNG can compress more than a GIF or JPEG of the 
same color depth and quality. 

The PNG format is best suited for creating complex live 
transparency, high-color graphics, or better compressed 



Web format comparison 




low-color graphics. 






GIF 


JPEG 


PNG 


Color depth 


8-bit maximum 


Up to 24-bit 


Up to 32-bit 


Compression 


Lossless; compresses 
solid areas of color 


Lossy; compresses subtle 
color transitions 


Lossless 


Transparency support 


Yes 


No 


Yes 


Advantages 


Lossless compression 
Transparency 


Ability to control quality 
loss in compression 

Excellent compression of 
photographic images 


Lossless compression 
Alpha transparency 
High color support 


Disadvantages 


Maximum of 256 colors 

Does not compress 
gradient colors well 


No transparency 

Loss of quality when 
compressed 


Not completely 
supported by common 
browsers without using 
plug-ins 


Typical Uses 


Cartoon images 
Logos 

Animated banners 


Scanned photographs 

Images with complex 
textures 

Images with complex 
gradient colors 


Images with high 
numbers of colors 

Complex, live 
transparency 
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Other export formats 

Fireworks exports other image formats which support 
up to 32-bit color. 

TIFF 

Tagged-Image File Format, or TIFF, is used for high- 
resolution images that are printed. TIFF files are not 
suitable for use on the web because of their size. 

PICT 

PICT is the standard image format for the Macintosh, 
and is typically used to transfer image data when 
copying and pasting from one application to another. 

BMP 

BMP is the standard bitmap image format for 
Microsoft Windows. 

xRes LRG 

xRes LRG is the image format used by 
Macromedia xRes. 



Batch processing 

Use batch processing to convert an entire folder of 
graphics. When batch processing, any setting made m 
the Export Preview dialog box may be applied to the 
processed graphics. Thus, use batch processing to 
convert to another format or convert to the same 
format with different settings. Fireworks can batch 
process all supported formats except FreeHand, 
Illustrator, and CorelDRAW 

To convert a group of files from one format to 
another: 

1 Choose File > Batch. 

2 Select the folder to process. 

Fireworks converts all files at the current level of 
the selected folder. Files m subfolders are not 
converted. If Fireworks is unable to convert a file, 
the file is left unchanged. 

3 Click Choose. 

The Batch Options dialog box appears. 

4 Choose a preset export setting from the User 
Presets pop-up. 

Specify export settings m the Export Preview dialog 
box. For more information, see “Using Export 
Preview” on page 95. 

5 Set Scale options. 

♦ Choose the % option to scale images by 
percentage. 



♦ Click the Vertical / Horizontal scaling button 
and enter numbers to scale images to specific 
horizontal and vertical pixel dimensions. 

♦ To scale images proportionally, enter or choose a 
value m either the Horizontal Scaling field or 
Vertical Scaling field, and then select Variable m 
the other. For example, to proportionally scale 
images to be 50 pixels wide, type 50 m the 
Horizontal Scaling field and choose Variable in 
the Vertical Scaling field. 
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6 Click OK. 

A status message displays the number of files 
currently processed out of the total files appearing 
m the selected folder. Unsupported files are reported 
as untouched. 

Click Cancel to cancel the batch process. 

Converted files are saved into their source folder, while 
the source files are moved into a newly created subfolder 
named Original Files. File name extensions are changed 
to indicate the format used m the batch conversion. 

Creating thumbnails 

Use Scale settings m the Batch Options dialog box to 
create thumbnails from an entire folder of graphics. 

♦ To create thumbnails that are sized proportionally to 
the original graphics, click % and enter a number. 

♦ To create thumbnails that have the same width or 
height, enter numbers m the Vertical or Horizontal 
Scaling fields. 



Working with other 
applications 

Working with Dreamweaver 

Macromedia Dreamweaver is a powerful visual web 
page authoring tool. Use Dreamweaver and Fireworks 
together to streamline your web design process. 

Images 

The most common way to use Fireworks and 
Dreamweaver is to create web graphics m 
Fireworks and include them on web pages created 
with Dreamweaver. 

To place Fireworks images on a web page using 
Dreamweaver: 

1 Export images from Fireworks to a web format. 

Use GIF, JPEG, or PNG. 

2 Copy or move Fireworks images into your 
Dreamweaver project folder. 

Although you can include a file from anywhere on 
your hard drive, it is easier to find and upload the 
files from Dreamweaver if you keep all your 
images m the same place m your Dreamweaver 
project folder. 

3 Click the location in the Dreamweaver document 
where you want to place an image, then choose 
Insert > Image. 

4 In the Insert Image dialog box, choose an image 
and click OK. 

Be sure the path between the HTML document 
and the image exactly matches the path used on 
your web server. 

The link to the image is formed and the image appears 
on the Dreamweaver page much as it would appear m 
most web browsers. 



Note: Remember to upload the image to your web 
server along with the Dreamweaver HTML document. 
The image must be placed on the server in the same 
place in relation to the HTML document as it was in 
your project folder. 
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To launch and edit Fireworks graphics that are 
placed in Dreamweaver 1.2: 

1 In Dreamweaver, choose Edit > Preferences and 
select Fireworks as an External Editor. 

2 In Dreamweaver, choose Window > Properties to 
open the Properties inspector if necessary. 

3 Select an image and click the Edit Image button 
on the Properties inspector. 

Dreamweaver launches Fireworks, if it is not 
already running. 

Dreamweaver searches the same folder as the 
graphic for a PNG file with the same name as the 
placed file m Dreamweaver, which it assumes is the 
Fireworks source file. 

4 Edit the graphic in Fireworks. 

5 Choose File > Export Again. 

The Save As (Windows) or Export (Macintosh) 
dialog box opens. 

6 In the Save as (Windows) or Export (Macintosh) 
dialog box, type a file name and choose a 
destination folder, and then click Save 
(Windows) or Export (Macintosh). 

7 Close the Fireworks document. 

8 Switch to Dreamweaver. 

The placed image updates to reflect the changes 
made in Fireworks. 



HTML and JavaScript 

Fireworks generates HTML files when exporting image 
maps, JavaScript rollovers, or Slices. Although 
Dreamweaver can generate the same data, it is often 
much faster to copy and paste the HTML generated 
from Fireworks into the Dreamweaver document. 

When copying JavaScript from Fireworks into 
Dreamweaver, be sure to: 

♦ Copy the HTML into the Dreamweaver 
HTML Inspector and not directly into the 
Dreamweaver page. 

♦ Copy all of the JavaScript code, as well as the tags for 
placing the image. 

For more information on HTML and JavaScript, see 
“Using Fireworks HTML on page 118. 

Editing Fireworks images in other 
image editors 

Fireworks PNG files can be edited m other image 
editors that support the PNG format. However, when 
other editors open and save a Fireworks PNG, the 
image is flattened and all path, frame, and layer 
information is lost. 
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Web Design Features 



Designing web components 

Fireworks has tools for creating many common web 
components, such as image maps, buttons, and animated 
GIFs. Also, Fireworks simplifies many web graphic 
preparation tasks, such as slicing large graphics into 
multiple files and adding JavaScript rollover capabilities. 



Switching to the URL overlay 

Fireworks places all URL objects on the URL overlay, a 
hidden layer m the Fireworks document. 

View the URL overlay m any of four ways: 

♦ Click the Show/Hide URLs button on the left 
side of the URLs toolbar. 



Using the URLs toolbar 

The URLs toolbar simplifies many tedious processes 
involved m creating hotspot regions, linking them to 
URLs, writing HTML instructions, and preparing 
links for a web browser. This toolbar is the control center 
for designing web components. 



Show or hide the URL overlay. 
Select and move URL objects. 
Create URL objects. 



Create, duplicate, and 
remove links. Choose 
image map and slice 
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Assign URLs. 

Create slice objects. 

Choose to view slice objects, URL objects, or both. 



URLs toolbar 



Note: A URL, or Uniform Resource Locator, is an 
address of a file on the Internet. Although URLs 
commonly link to web pages, they can also link to 
downloadable files, e-mail addresses, telnet sites, 
newsgroups, Internet chat rooms, or other 
Internet resources. 



♦ Choose a URL basic shape tool from the 
URLs toolbar. 

♦ Choose Select > Copy to URL when an object 
is selected. 

♦ Choose an option from the URLs toolbar 
Options pop-up. 

Hide the URL overlay m either of two ways: 

♦ Click the Show/Hide URLs button. 

♦ Choose a tool in the Toolbox other than the Pointer, 
Select Behind, Subselection, and Hand tools. 

Using the URLs toolbar Options pop-up 

Use the URLs toolbar Options pop-up to create, edit, 
duplicate, and delete URL links. Choosing New Link, 
Edit Link, or Duplicate Link opens the Link Info 
dialog box. 




Enter or edit a URL to link to the selected URL object. 



Enter text to be 
displayed in the 
browser status bar 
when the cursor is 
over the hotspot. 



Click to choose an overlay color 
from the system color picker. 



Specify the window or frame 
in which the link is displayed. 
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Creating an image map 

An image map is a graphic with URLs assigned to 
hotspot regions of the graphic from within an HTML 
file. Clicking a hotspot m a web browser opens the web 
page to which the URL links. A well designed image 
map can add significantly to a web site’s visual impact. 

See the tutorial “Linking an image map” on page 50 for a 
step-by-step example of working with an image map. 

Choosing a source graphic 

A source graphic is the graphic over which an image 
map is laid. The graphic can be an imported graphic or a 
graphic created m Fireworks. When choosing a graphic 
on which to build an image map, choose one with 
elements that people are likely to perceive as hotspots. 

Creating a hotspot 

A hotspot is an area of a graphic that is linked to a URL. 
When a hotspot is clicked, the web browser jumps to 
the web page specified by the linked URL. In 
Fireworks, define hotspots by creating URL objects. 

To create a hotspot (URL object): 

1 Create or open a source graphic on which to 
place a hotspot. 

2 Choose a URL basic shape tool from the 
URLs toolbar. 

Choosing a URL tool activates the URL overlay. 

3 Create a hotspot region by dragging a URLs 
shape tool. 

4 Choose New Link from the URLs toolbar 
Options pop-up. 

The Link Info dialog box opens. 

5 Enter a URL to which the hotspot will link, 
enter a browser status bar message, and enter 
a target. 

Browser status bar messages and targets are 
optional. 



6 Optionally, click the Overlay Color color well 
and choose an overlay color to organize 
hotspots by color. 

7 Click OK in the Link Info dialog box. 

Exporting an image map 

When the image map is complete, choose Image Map 
Options from the URLs toolbar Options pop-up. 




Specify whether the image map 
is client-side or server-side. 



Choose a URL that is 
used for parts of the 
image not defined by 
URL objects. 



Enter text that is displayed in a browser 
when the image is not displayed. 



Client-side and server-side image maps 



A client-side image map requires image map 
information to be stored within the HTML document. 
A client-side image map shows the actual URL m the 
status bar message at the bottom of the browser window. 



A server-side (NCSA) image map requires the image 
map information to be saved within a separate file stored 
on a server and accessed by a CGI script. This type of 
image map is far more complicated to set up, and is not 
supported by all servers. Server-side image map behavior 
varies from system to system, even among different 
systems using the same server. A server-side image map 
shows the coordinates at the bottom of the screen. 



Note: Contact your service provider to find out how 
your server handles server-side image maps. 
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Exporting image map code 

Export image map code when exporting the image by 

checking Generate HTML m the Export dialog box. 

Clicking Export produces additional files: 

♦ The HTML file. The suffix or extension .htm is 
added to the file name being exported, and the file is 
placed m the same folder as the source graphic. 

♦ The MAP file is generated for server-side image 
maps and is created when the user specifies a Map 
Type of Both or Server-Side m the Image Map 
Options dialog box. 

For more information about HTML exported with 

image maps, see “Using Fireworks HTML’ on page 118. 



Slicing images when 
exporting 

A common method of creating navigation bars or 
navigation graphics for web sites is to create a graphic 
and then cut it into pieces that are then reassembled on a 
web page using an HTML table. The graphic appears 
seamless m the web browser but is actually made up of 
multiple pieces, each a separate file. 

Creating a navigation graphic this way has several 
advantages: 

♦ In HTML, creating a link from an entire image is 
often easier than using an image map. 

♦ If a section of the graphic is updated frequently, such 
as today’s date or a current news item, a single piece 
may be replaced rather than the entire graphic. 

♦ Parts of a graphic may be optimized individually, 




graphic contains a mix of photographic images and 
text. 

♦ The cumulative file size of all the pieces can be 
smaller than the single, large graphic, because each 
piece may be optimized individually. 



Creating a sliced image 

In Fireworks, use the Slice tool on the URLs toolbar to 
draw rectangular slice objects. Slice objects define parts 
of the image that are exported as individual files. 
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For example, if you have a JavaScript rollover m the 
middle of the canvas and you want to export it as a 
separate image, draw a slice object over it. Then, when 
you export the Slices, the JavaScript rollover and all its 
states will be exported as separate files defined by the 
slice object. 

Slice guides 

Slice object 




appear indicating how 
the image will he sliced 
into multiple files 
when exported. 



Fireworks creates the smallest number of slices possible 
by intelligently combining sections of the image that do 
not contain slice objects. 

Exporting an image in multiple slices 

Fireworks automatically divides an image into multiple 
pieces based on where slice objects have been drawn. 

To slice an image: 

1 Choose File > Slice > Slice Defaults and set the 
default file settings used for exported slices. 

Each slice may be individually optimized using the 
Slice Object Properties dialog box. Slices that are not 
individually optimized use the Slice Defaults 
settings when exported. 



2 Using the Slice tool, draw slice objects over the 
areas of the image you want to export as 
individual files. 

3 Set slice object properties for each slice object by 
selecting the object and then choosing Object 
Properties from the Options pop-up on the URLs 
toolbar, or by choosing Modify > Object 
Properties. 

For more information about setting slice object 
properties, see “Setting slice object properties” on 
page 112. 

4 Choose File > Slice > Export Slices. 

The Export Slices dialog box opens. 

5 In the Export Slices dialog box, type a name for 
the file and choose the destination. 

♦ Check Put Images m Subfolder and enter a 
name to place the image files m a separate 
subfolder from the HTML file. The HTML 
file that is generated creates links to the images 
m the subfolder. Be sure to place the images m 
an equivalent subfolder when putting your files 
on a server, or edit your HTML file to reflect 
the new location of the images on the server. 

♦ Check Create Demo Rollover HTML to 
export multiple HTML files for quickly 
previewing all the states of JavaScript rollovers 
when they are included m your document. 

6 Click Export. 

Each region is exported as a separate graphic using the 
name entered m the Slice Object Properties dialog box. 
If no name is entered, then the slice is named according 
to its position m the graphic. 

For example, if the Fireworks document is named 
Graphic.gif, then the top left region is exported as 
Graphic_01_01.gif. The second region on the top row 
would then be exported as Graphic_01_02.gif. The first 
region on the second row would be Graphic_02_01.gif, 
and so on. 
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Setting the Slice Type 



Setting slice object properties 

Use the Object Properties dialog box to set the 
characteristics for each slice object. Slice objects can have 
unique names and types. Each slice can be optimized 
individually using the Export Preview dialog box. 




Open the Slice Object Properties dialog box by 
selecting a slice object and then choosing Object 
Properties from the Options pop-up on the 
URLs toolbar, or by selecting an object and choosing 
Modify > Object Properties. 



Choose the type of file to export for each slice object 
from the Slice Type pop-up m the Slice Object 
Properties dialog box. A single Fireworks document can 
contain multiple types of slices m any combination. The 
types are: 

♦ Image — Export the slice m any image format that 
Fireworks supports. 

♦ Rollover — Export the slice as a JavaScript rollover. 
The Rollover Slice format only supports GIF and 
JPEG. 

Check Include Down State to use the area on 
Frame 3 beneath the selected slice to create a Down 
state for the rollover. 

Check Include onClick State to use the area on 
Frame 4 beneath the selected slice to create an 
onClick state for the rollover. 

For information on creating a JavaScript rollover, see 
“JavaScript rollovers” on page 117. 

♦ No Image — Export no image file for this slice. In 
the HTML table generated to reassemble the slices 
m a browser, this area contains no image. 

Use the HTML text field to enter text or HTML 
code that will appear m this cell of the table when 
viewed m a browser. Be careful not to enter more 
text than will fit m the cell— doing so will result m 
improper table formatting. 
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Animated GIF 



An animated GIF is a GIF 89a file containing multiple 
images. These images act as successive frames of 
animation when the GIF is viewed m a web browser. 

Fireworks has all the features you need for creating 
and editing animated GIFs. Open and edit existing 
animated GIFs or create new animated GIFs 
from scratch. 

Opening animated GIFs 

When an animated GIF is opened, Fireworks does the 
following: 

♦ Creates a background layer based on common pixels 
found m more than half of the imported frames. 

♦ Places the animated components from each frame 
onto a separate frame of the Frames panel. These 
components are placed as image objects on a layer 
named GIF. 

To edit an animated GIF, choose a frame on the Frames 
panel and make any necessary changes. 

Creating animated GIFs 

Create each frame of the animated GIF on a separate 
frame of the Frames panel, starting with Frame 1. 
Objects that appear throughout the animation must be 
placed on each frame or on the Background layer. 

To preview the animation, choose File > Export, choose 
Animated GIF from the Formats pop-up, and then 
click the Play button m the Export Preview dialog box. 

Use Symbols and Instances to simplify animation and 
to improve editability across frames. When the original 
object (called the Symbol) is modified, the copies (called 
Instances) automatically change to reflect the 
modifications to the Symbol. 

For example, when animating the word “Cow” across 
ten frames, create a Symbol from the word “Cow” on the 
first frame, and then place instances of “Cow” on the 
other nine frames. Move them, transform them, and 
apply effects to them. 



To change the word to “Llama,” change the Symbol on 
the first frame from “Cow” to “Llama” using the Text 
Editor. Every instance of that Symbol is updated to 
“Llama”, but each Instance retains its characteristics— 
only the text changes. 

For more information about Symbols and Instances, see 
“Symbols and Instances” on page 82. 

Managing frames 

Use the Options pop-up on the Frames panel to add, 
copy, or delete frames, or to copy or distribute objects 
across multiple frames. The Frame panel Options pop- 
up contains the following options: 



Use 


To 


Add Frames 


Add frames to a document. 




In the Add Frames dialog box, 
enter the number of frames to add 
and choose where the new frames 
will be inserted. 


Duplicate 

Frame 


Create copies of a frame. 

In the Duplicate Frames dialog 
box, enter the number of 
duplicates to create for the 
selected frame, and choose 
where the duplicate frames will 
be inserted. 


Delete Frame 


Delete the selected frame. 


Copy To Frames 


Copy the current selection to other 
frames. 




In the Copy To Frames dialog box, 
choose where the selection will 
be copied. 


Distribute 

Selection 


Distribute a selection of objects 
across multiple frames, according 
to their stacking order from 
bottom to top. 




Objects are placed on existing 
frames after the current frame. 
New frames are added as needed 
to distribute all selected objects. 
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Exporting animated GIFs 

Use the Options panel in the Export Preview dialog box 
to optimize the animated GIE Use the Animation 
panel to set the frame delay and disposal method of each 
frame, and to set how the animated GIF loops when 
viewed m a web browser. 

To export an animated GIF: 

1 Choose File > Export. 

2 Click the Options tab and choose Animated GIF 
from the Format pop-up. 

3 Make changes to the Palette, Dither, or 
Transparency options. 

4 On the Animation panel of the Export Preview 
dialog box, set the disposal method and frame 
delay for each frame and choose loop settings. 

♦ To select a range of frames, select the first frame, 
hold down the Shift key, and then select the last 
frame m the range. 

♦ To select multiple frames, hold down the 
Control key (Windows) or Command key 
(Macintosh) while selecting individual frames. 



Choose a disposal method for selected frames. 
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■ Enter a display 
time for selected 
frames. 



- Click to set the 
animation to 
play once and 
then stop. 



Enter the number of times 
the animation will replay. 

Click to set the animation 
to play multiple times. 



Check to create lower quality animated 
GIFs in order to reduce file size. 



5 Click Export. 

6 In the Export dialog box, type a name for the file 
and select the destination. 



Disposal method 

The disposal method determines how pixels of the 
selected frame are replaced by the next frame 
when viewed m a web browser. There are four disposal 
methods: 

Unspecified — No disposal method is specified. 
Fireworks will automatically select the disposal method 
for each frame. 

Choose Unspecified to create the smallest possible 
animated GIFs. 
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None — The frame is not disposed before the new frame 
is displayed. The next frame appears on top of the 
current frame. 

Choose None to add a smaller object to the existing 
frame. 

Restore to Background — Erases the current frames 
image and restores the area to the background color or 
pattern that appears m the web browser. 

Choose Restore to Background when moving an object 
m a transparent animated GIF. 

Restore to Previous — Erases the current frame’s image 
and restores that area to the previous frame’s image. 

Choose Restore to Previous to animate objects across a 
background image. 

Transparency 

Fireworks exports transparent animated GIFs if the 
canvas is transparent or if transparency has been defined 
on the Options panel of the Export Preview dialog box. 

Note: Not all web browsers support transparent 
animated GIFs. 

Frame delay 

Set the frame delay to determine how long the current 
frame is displayed. Frame delay is specified m 
hundredths of a second. For example, a setting of 50 
displays for half a second, while a setting of 300 displays 
for 3 seconds. 

♦ To make frames display as quickly as possible, set the 
frame delay to 0. 

♦ To enter a frame delay value, choose a frame from 
the list and then enter a number m the Frame 
delay field. 



Looping 

Use the Foop settings to determine how many times the 
animation plays. 



Click 


To 


Play once 
button 

0 


Set the exported animated GIF to 
play once and then stop. 


Loop button 

Ee] 


Set the exported animated GIF to 
replay the animation the number 
of times specified in the Number 
of Loops pop-up. 

For example, entering 4 plays the 
animation the first time, then 
replays it four more times. 

Choose Forever from the Number 
of Loops pop-up to play the 
animation continuously. 



Lossy Optimization 

When checked, Fossy Optimization compresses the 
animated GIF by disposing of similar pixels between 
frames rather than just identical pixels. Although this 
can reduce file size, lossy optimization often reduces the 
quality of the animated GIF. 
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Transparency 

Using Fireworks, you can create web graphics with fine- 
tuned transparencies. Transparency is supported m two 
graphic formats: GIF and PNG. 

GIF transparency 

Transparency is defined m GIF files by designating one 
or more colors to be transparent. The designated color is 
transparent when the GIF is viewed m a browser. 

Use the Export Preview dialog box to set or adjust the 
transparent area m a GIF Use the Transparency 
Eyedropper tools to add or remove colors from the 
transparent area. 

For more information on setting GIF transparency see 
“Transparency eyedropper tools” on page 99. 

PNG alpha transparency 

Exported PNG files can contain alpha transparency 
settings. Alpha transparency is different from GIF 
transparency m that gradient levels of transparency can 
be specified. This means that pixels may be set to blend 
with the web browser’s background color or background 
image. 

However, alpha transparency is not supported fully by 
current browsers. Netscape Navigator 4.04 supports 
PNG, but not alpha channels. Microsoft Internet 
Explorer 4 partially supports PNG alpha channels, but 
sometimes displays inconsistently when complex 
gradient transparency is defined. 



To include alpha transparency in an exported 
PNG: 

1 Create an image in Fireworks using a transparent 
canvas. 

Images with feathered edges, anti-aliasing, or varied 
opacity settings take advantage of alpha 
transparency. 

2 Choose File > Export. 

3 Choose PNG from the Formats pop-up on the 
Options panel of the Export Preview dialog box. 

4 Choose Alpha Channel from the Transparency 
pop-up. 

5 Click Export. 

6 In the Export dialog box, type a name for the file 
and select the destination. 
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JavaScript rollovers 

JavaScript rollovers are images that change appearance 
m a web browser when you move the mouse over them 
or click them. JavaScript rollovers are created by 
drawing different rollover states, and then using 
JavaScript within an HTML file to switch to a different 
image for certain events, such as moving the mouse over 
the image. 



When a rollover is previewed m a browser, its Down 
state is not shown. To be able to preview all four states, 
use a slice object to define each rollover, choose File > 
Export Slices, and then check Create Demo Rollover 
HTML m the Export Slices dialog box. Fireworks 
exports a group of HTML files with the word "demo" 
appended to each file name. Using a browser, open the 
unnumbered demo file, and then click the rollovers to 
test all the states. 



To create a JavaScript rollover: 

1 Draw each rollover state on a separate frame, 
with each state positioned at the same location 
on each frame. 



For more information about using Down states m 
HTML files, see Fireworks Help. 

Drawing buttons 



♦ Up state goes on Frame 1 

♦ Over state goes on Frame 2. 

♦ Down state goes on Frame 3. 

♦ onClick state goes on Frame 4. 

2 Choose File > Export. 

3 In the Format pop-up of the Export Preview 
dialog box, choose either GIF Rollover or JPEG 
Rollover. 



Any object or effect may be used to create a rollover state. 
However, because buttons are the most common type of 
JavaScript rollovers, Fireworks includes Live Effect 
presets to simplify the creation of common button 
appearances. Apply an Inner Bevel or Outer Bevel effect 
to an object, and then choose Raised, Highlighted, Inset, 
or Inverted from the Button Presets pop-up on the 
Effect panel. 



Button Presets effects Description 



4 Make any other export settings. 

To preview each rollover state, use the frame 
controls at the bottom of the Export Preview 
dialog box. 

5 Click Export. 

6 In the Export dialog box, type a name for the file 
and select the destination. 

When exporting rollovers, Fireworks automatically 
generates the JavaScript necessary for displaying the 
rollovers m a web browser. 

For more information on using Fireworks HTML files, 
see “Using Fireworks HTML on page 118. 



The Down state 

The Down state of a JavaScript rollover depicts the 
rollover's state on the destination web page. For example, 
the Down state is commonly used to show which 
button was clicked to view the current web page. 



Raised 



Raised 



Highlighted 



Inset 




Inverted 



Invertor! 



The bevel appears 
raised up from the 
underlying objects. 



The button's colors 
lighten. 



The bevel appears 
sunken into the 
underlying objects. 



The bevel appears 
sunken into the 
underlying objects and 
the colors lighten. 
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Assigning URL links to rollovers 

Use the URL Rectangle tool on the URLs toolbar to 
assign a URL to a rollover. 



To 


Do this 


Use the entire 


Draw a rectangular URL object 


image as a 
rollover 


over the entire image. 


Create rollover 
areas within a 
sliced graphic 


Draw a slice object over the 
rollover area. Set URLs for each 
rollover using the Slice Object 
Properties dialog box. 



Exported JavaScript code 

When JavaScript rollovers are exported, an HTML file 
is also exported that includes JavaScript used to display 
the rollover m a web browser. The JavaScript exported 
from Fireworks is compatible with versions 3 and 4 of 
both Netscape Navigator and Microsoft Internet 
Explorer. Some browsers cannot display all four 
JavaScript rollover states. In that case, the JavaScript 
exported by Fireworks allows those browsers to display 
the Up state and link to the appropriate URL. 

Pre-caching 

The JavaScript generated by Fireworks performs pre- 
cachmg of rollover states. This means that when the 
HTML file is first loaded into the web browser all of the 
rollover images, even those not initially visible, are loaded 
into the browsers memory. When the cursor is moved 
over a Fireworks JavaScript rollover, the alternative state 
is immediately swapped, instead of having to wait for it 
to be downloaded from the server. 



Using Fireworks HTML 

Check Generate HTML m the Export dialog box to 
make Fireworks export HTML any time you export an 
image. For basic images, the exported HTML file sets 
the background color to match the canvas color and 
adds a link to the image. Viewing this HTML file m a 
web browser lets you quickly preview how the image 
will look m a browser with a background color. 

For more complex web features, Fireworks exports 
additional HTML to set up the appropriate behaviors. 
Extra HTML is generated for the following items: 

♦ JavaScript rollovers 

♦ Image maps 

♦ Sliced graphics 

♦ Status bar messages 

View HTML files exported by Fireworks by opening 
them with a web browser. Portions of those HTML 
files may be copied and pasted into other HTML files. 
HTML files may be edited by opening them m a text 
editor, such as NotePad (Windows) or SimpleText 
(Macintosh), or m a web authoring tool like 
Macromedia Dreamweaver. 
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Some HTML basics 

HTML files are essentially text files that contain: 

♦ Text that appears on the web page. 

♦ HTML tags that define document formatting and 
structure, and link to images and other HTML 
documents (web pages). 

HTML tags are enclosed m brackets and look 
something like this: 

<tag> affected text </tag> 

Like the example above, most HTML tags use both an 
opening tag and a closing tag, which together define the 
beginning and ending of the affected text. Some tags, 
however, need only an opening tag. Many tags allow 
additional variables to be added to control how the tag 
affects the selected range of text. For example: 

<font color= "blue" > Fireworks </font> 

This tag would cause the word Fireworks to be 
colored blue. 

Common HTML tags 

Most HTML documents contain the following tags: 

<HTML> </HTML> — Marks the beginning and 
ending of the HTML document. 

<TITLE> </TITLE> — Sets the name of the document 
that appears on the top of the browser window. 

<HEAD> </HEAD> — Information m this section 
describes various characteristics of the document such as 
the document title, background color, text color, and 
font usage. JavaScript code is placed within this section 
of the document. 

<META> </META> — Stores extra information about 
the HTML document such as what application created 
it, keywords for search engines, and other information 
used by various applications. Many HTML editors or 
utilities add meta information to an HTML document. 

< SCRIPT > </SCRIPT > — Marks the beginning of code 
for a scripting language, such as JavaScript. 

< BODY> </BODY>— Text or links m this section go 
into the mam body of the document. 



<IMG> — Displays an image on the web page. 

For example: 

<IMG SRC="Picture.gif"> 

This tag displays the image Picture.gif on the page. 

<A> </A> — Creates a link from text or an image to 
another HTML document. For example: 

<A HREF= "http://www.macromedia.com"> Link</A> 

In this case, clicking the word “Link” jumps to 
www.macromedia.com. 

To place an image and also make that image a link, use 
two tags: 

<A HREF= "http://www.getfireworks.com"> 

<IMG SRC="Explosion.jpg"x/A> 

The image Explosion.jpg is displayed on the web page 
and clicking on it takes you to www.getfireworks.com. 
Note that the link to the image is placed within the link 
tags, between <A> and </A>. 

<MAP> </MAP> — Information within this tag 
describes the shape of a hotspot using coordinates and 
contains the URL destination of the hotspot. 

Note: For more explanation on specific HTML tags and 
their usage, consult one of the many commercially 
available books or websites about HTML. 

Copying and pasting from a Fireworks 
HTML file 

When copying HTML exported from Fireworks, it is 
important to paste it to the correct place within the 
destination HTML document. 

When copying and pasting Fireworks HTML into 
other HTML documents, you do not have to copy the 
<HTML> or <BODY> tags. Those tags should already be 
included m the destination HTML document. 

For more information about where to paste sections of a 
Fireworks HTML file, see Fireworks Help. 
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Add to Transparency tool 99 
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animated GIFs 

animation panel 33 
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disposal method 33, 114 
exporting 114 
frame rate 33 
importing 94, 113 
looping 33, 113 
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previewing 113 
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importing 92 
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Background image 
editing 64 
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Background Image command 37 
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editing 23 
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brush stroke preview 70 
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edge 70 

editing a brush 71 
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buttons 

JavaScript for 117 
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c 
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brush 69 
effect 69 
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m PNG images 102 
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Shift key 60 
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Convert to Alpha Xtra 87 
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D 

default colors 69 
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Draft Display 21 
Full Display 21 
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dithering 
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settingup 23— 27 
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viewing in Full Display or Draft Display 21 
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Index 123 



document rulers 

showing and hiding 26 
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JavaScript rollover 117 
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drag and drop 

to import graphics 91 
drawing 
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by plotting points 60 
centered shapes 60 
in object mode 60 
lines 58-62 
with the Brush tool 70 
with the Pen tool 70 
Dreamweaver 

exporting HTML and JavaScript to 105 
using Fireworks with 104-105 
Drop Selection command 37, 64, 65 



edges 

anti-alias 72 
feather 72 
hard edge 72 
showing and hiding 59 
Edit Brush panels 71 
Edit Gradient dialog box 72 
editability 

in Fireworks 25 



Background image 64 
Background layer 25 
Bezier curves 59 
brush 42 

custom color palettes 98 
effects 75 

feathering path objects 43 
fills 72 
grids 26 
guides 26 

image objects 25,36—37 
Live Effects 74 
path objects 25, 40-42 
paths 59 
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speed 42 
text 25,45-47 

effect color 
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Effect panel 18, 75 
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applying multiple effects 75 
applying to text 46 
color well 69 
creating 41, 46 
examples 74 
Live 74 
Xtras 65,75 
Ellipse Marquee tool 64 
Ellipse tool 8, 60 
Eraser tool 9, 61, 62 



124 Index 



Exact color palette 98 
Exit Image Edit command 63 
Export Again command 94 
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animation tutorial 33 
bypassing on export 94 
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Export Preview Animation panel 100 
Export Preview File panel 100 
Export Preview Options panel 97 
graphics 29, 94-104 
image maps 31, 109 
Index Number field 99 
interlacing on export 99 
Number of Colors pop-up 98 
optimizing colors on export 99 
palette display area 98 
PICTs 103 

previewing document 33 
rollover buttons 49 
saving a custom color palette 98 
scaling images on export 100 
setting color depth on export 97 
setting color palette on export 97 
setting file format 97 
setting transparency on export 99 
supported file formats 97 
supported methods listed 94 
TIFFs 103 

using Export Area tool 100 
xRes LRG format 103 
exporting BMPs 103 
Eyedropper tool 9 

placing a color in the Color Mixer 67 
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feather 76 
features 

unique to Fireworks 4 
File panel 

m Export Preview dialog box 100 

files 

animated GIFs 53 

editing Fireworks images in other applications 105 
effect on file size of dithering 98 
Open as Untitled checkbox 32 
previewing on import 90 

setting color palette m Export Preview dialog box 97 
setting format m Export Preview dialog box 97 
fill color 

applying using Color Mixer 16, 66 
Fill panel 17, 72 

Options pop-up 17 
fills 72-73 

adjusting Pattern and Gradient fills 72, 73 

attributes 58 

color well 69 

creating 38-39 

Edit Gradient dialog box 72 

editing 72 

editing with the Pamt Bucket tool 72 
feathering 43 
Gradient 72 
reset center 35 
texture 44, 73 
transparency 84 
using fill bandies 35 
Fireworks 

a case study 22—24 

editing Fireworks images in other applications 105 
features m 4 

importing and exporting workflow 90 
importing Fireworks files 92 
installing 3 

maximum canvas size 6 
overview 5 
package contents 2 
resources lor learning 4 
starting 3 

system requirements for 2 
uninstalling 3 

using with Dreamweaver 104-105 



Fireworks Help 4 
flatten layers 64 
fonts 

used m tutorials 32 
frames 

creating animated GIFs 113 
disposal method 53, 114 
imported from an animated GIF 113 
Frames panel 19 
Freeform tool 9, 44, 61, 62 
tutorial 42, 44 
FreeHand files 

converting 93—94 
importing 93—94 
Full Display mode 21 

a 

GIF 

animated 113 

as a Web export format 101 
compared to other Web formats 102 
compression 101 
defined 101 
transparency 116 
GIF 89a 113 
Gradient fills 72 
graphics 

dithering 98 
exporting 29, 94-104 
importing 27, 90-94 
importing using Copy and Paste 91 
importing using drag and drop 91 
interlacing on export 99 
optimizing colors on export 99 
resampling during Copy and Paste 91 
resizing while importing 90 
scaling images on export 100 
setting transparency on export 99 
slicing 110 

supported export formats 97 
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Grayscale color model 67 
Grayscale color palette 98 
grid 26 

Group command 35 
groups 

creating 35 

selecting objects within 35 
ungroupmg 79 
guides 26 — 27 , 110 

H 

Hand tool 8 
handles 

fill 35 
mask 43 
pamt bucket 72 
point 59 
transform 65 
transformation 35, 47 
Hexadecimal color model 67 
Hide Edges command 34, 59 
hiding 

document rulers 26 
edges 34 
layers 34, 38 
toolbars 7 
Toolbox 7 
URLs 51 

hotspots 

creating 108, 109 
HSB color model 67 
HTML 

Create Demo Rollover HTML checkbox 111 
exported with image maps 110 
exporting to Dreamweaver 105 
JavaScript code 118 
pre-cachmg 118 



I 

Illustrator files 

importing 93-94 
image 

cropping 64 
filters 63 

image edit mode 56—66 
activating 36—37, 63 
activities 63 
introduced 25 
Magic Wand tool 37 
marquees 64 
pasting m 92 
tools 63 
tutorial 36 

using drawing and editing tools 56 
Image Map Options 13,51 
image maps 

client-side 109 
creating 109 
creating hotspots 109 
exporting 109 
HTML exported with 110 
MAP file 110 
server-side 109 
URL overlay 108 
Image Object command 36 
image objects 64 
editing 25 
images 

converting text to 78 
m object mode 57 
Import Lile dialog box 90 
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importing 

animated GIFs 94, 113 
ASCII text 92 
bitmap art 27 
CorelDRAW files 93-94 
Fireworks files 92 
FreeHand files 93-94 
graphics 27, 90-94 
Illustrator files 93-94 
resizing while importing 90 
RTF text 92 

supported Clipboard formats 91 
supported formats listed 91 
text 92 

using Copy and Paste 91 
using drag and drop 91 
vector art 27 

Index Color transparency setting 99 
Index Number field 

in Export Preview dialog box 99 
Info bar 11 

color model 67 
unit of measurement 26 
Inner Bevel 

drawing button states 117 
installing 

Fireworks 3 
Instances 

creating 82, 83 
deleting 83 
modifying 82 
interlacing 

on export 99 

u 

JavaScript 

exported with rollovers 118 
JavaScript rollover 

button states 117 
Down state 117 
tutorial 48 

JavaScript rollover buttons 
pre-caching 118 
Join command 40 



JPEG 

as a Web export format 101 
compared to other Web formats 102 
compression 101 
defined 101 
progressive JPEGs 101 
smoothing 101 

K 

keyboard shortcut 

magnification 21 
keyboard shortcuts 8—9 
Knife (Eraser) tool 61, 62 

L 

Lasso tool 8, 64 
layers 

creating 19 
deleting 19 
hiding 19,34,38 
locking 19 
showing 19, 34, 38 
unlocking 19 
Layers panel 

Options pop-up 19 
learning Fireworks 
resources for 4 
Line tool 8, 60 
lines 

43 degree increments 60 
drawing 38—62 
Link Info dialog box 30 
Live Effects 74 

applying multiple 73 
applying to an object 73 
looping 113 
lossy optimization 113 
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M 

Macintosh computers 

Fireworks Preferences file 14 
Fireworks, system requirements for 2 
Magic Wand tool 8, 64 
tutorial 37 
magnification 

document 20—21 
in Export Preview dialog box 96 
keyboard shortcut for 21 
page 20-21 
Magnify tool 8 

Mam toolbar (Windows only) 10 
MAP file 110 
Marquee tool 8, 64 
marquees 64 

removing pixels 64 
showing and hiding 59 
mask groups 

alpha mask group 44 
converting from one to the other 44 
editing masking path 44 
paste inside group 41,43 
selecting objects within 87 
text masks 44 
tutorial 43 
ungroupmg 44 
masking 116 

Convert to Alpha Xtra 87 
measurement, units of 26 
menus 

context-sensitive 21 
Microsoft Internet Explorer 
PNG support 116 
Microsoft Windows 

Fireworks, system requirements for 2 
modes 

object and image edit 56 
Modify toolbar 11 
modifying 

canvas color 25 
canvas size 25 
fills 35 

image objects 36 
Instances 82 
Symbols 82 



moving 

m document 20—21 
object to Background layer 37 
multiple document views 21 

N 

navigating 

m document 20—21 
Netscape Navigator 
PNG support 116 
New Document dialog box 
setting resolution m 25 
Number of Colors pop-up 

m Export Preview dialog box 98 

o 

object editing tools 61, 62 
object mode 56—66 
activating 63 
activities 57 
Brush tool 40 
drawing 60 
editing tools 61 
introduced 25 

manipulating objects m 34—35 
pasting while m object mode 92 
Path Scrubber tool 42 
Pen tool 41 
Reshape Area tool 41 
Select Behind tool 35 
Subselection tool 35 
tutorial 34 

using drawing and editing tools 56 
Object Properties dialog box 13 
objects 

displaying points 59 
grouping 35 
joining 40 

Object Properties dialog box 44 
rotating 35 
selection feedback 35 
Opacity toolbar 12 
open paths 58 
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optimizing 

animated GIFs 11 5 
colors on export 99 
graphics 99 
Option key 

drawing centered shapes 60 
Options panel 

in Export Preview dialog box 97 
Tool Options panels 14 
organizing your document 79—81 
Outer Bevel 

drawing button states 117 

P 

package 

contents of Fireworks package 2 
page magnification, setting 20—21 
Pamt Bucket tool 9, 72 
editing fills 72 
handles 72 
tutorial 38—39 
painting 70 
palette display area 

in Export Preview dialog box 98 
palettes 

changing 16 
Swatches panel 68 
using export palette 97 
panels 

Brush 17 
closing 33 
Color Mixer 16 
displaying 33 
Effect 18,75 
Fill 17, 72 
Frames 19 

returning to default positions 14 
Swatches 15 
Text Editor 18 
Tool Options 14 
using 14-18 

Paste Inside command 41 
pasting 

m image edit mode 92 
while m object mode 92 



path objects 

editing 25, 40—42 
feathering 43 
Path Redraw tool 61, 62 
Path Scrubber tool 9, 61 
tutorial 42 
paths 56 

closing 58 

converting text to 78 
displaying points 59 
displaying without points 58 
editing 59 

editing without point handles 62 
open and closed 58 
pushing and pulling 62 
redrawing 62 
selecting 58 
Pattern fills 70 
Pen tool 8, 70 

inserting points 41 
tutorial 41, 47 
Pencil tool 9 
perspective 65 
Photoshop Plug-ms 65, 75 
PICT export format 103 
pixels 56, 63 
cutting 64 
editing 63 
selecting 64 

PNG 

alpha channel 116 

as a Web export format 102 

compared to other Web formats 102 

compression 102 

defined 102 

Microsoft Internet Explorer support 116 
Pointer tool 8 

mouse highlight 34 
selecting paths 58 
tutorial 34 
points 

corner 59 
curve 59 
handles 59 

Polygon Lasso tool 64 
tutorial 36 
Polygon tool 8, 60 
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polygons 

angle 60 

number of sides 60 
pre-caching 

HTML 118 

JavaScript rollover buttons 118 
preferences 

displaying 33 
restoring defaults 33 
Preferences file 

default positions and 14 
Macintosh 14 
Windows 14 
preview area 

in Export Preview dialog box 96 
Preview page button 14 
progressive JPEG images 101 
pulling paths 62 
pushing and pulling an area 62 
pushing paths 62 

R 

Rectangle tool 8, 60 

rounded corners 60 
rectangles 

rounded corners 60 
Redraw Path tool 9 
redrawing paths 62 
resampling 

during Copy and Paste 91 
Reshape Area tool 9, 61, 62 
tutorial 41 
resolution 

setting 23 

resources for learning Fireworks 4 

RGB color model 67 

right mouse button (in Windows) 21 

rotating objects 33, 63 

rounded corners 60 

RTF text 

importing 92 
Rubber Stamp tool 9 
cloning 37 
rulers 26 



saving a custom color palette 98 
saving custom brushes 71 
Scale tool 9 
scaling images 

on export 100 
scaling objects 63 
Select Behind tool 8, 39 
tutorial 33, 43, 44 
Select Transparency tool 99 
selecting 

additional objects 39 
all within a group 73 
an image m object mode 64 
hiding edges 34 
Magic Wand tool 37 
mouse highlight 34 
objects 38 
paths 38 
pixels 64 
Pointer tool 34 
points on a path 41 
Polygon Lasso tool 36 
Select Behind tool 33, 44 
Subselection tool 33, 41 
superselectmg 73 
within groups 33 
within mask groups 43 
Selection highlight 

showing and hiding 39 
setting up 

document 23— 27 
Shift key 

constraining shapes 60 
shortcut. See keyboard shortcut. 
Show/Hide URL button 13 
showing 

document rulers 26 
layers 34, 38 
toolbars 7 
Toolbox 7 
URLs 31 
Skew tool 9 
tutorial 47 
skewing objects 63 
Slice tool 13 
slicing a path 62 
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smoothing 

in JPEG images 101 
Snap to Grid command 26 
split view 

m Export Preview dialog box 96 
squares 60 

rounded corners 60 
StarGaze web page 32 
stars 

angle 60 

number of points 60 
starting Fireworks 3 
Status bar (Windows) 63 
Stop button 63 
stop cursor 63 
striped border 63 
Subselect command 75 
Subselection tool 8, 59 
selecting points 41 
tutorial 35, 41 

Subtract from Transparency tool 99 
Superselect command 75 
swap colors 69 
swatches 

adding to Swatches panel 16 
replacing m Swatches panel 16 
saving from Swatches panel 16 
sorting from Swatches panel 16 
Swatches panel 15, 68 
adding a color 68 
appending a palette 68 
applying color 68 
changing palette 16 
deleting a color 68 
eyedropper cursors 68 
replacing a color 68 
using the current export palette 68 
Symbols 

adding items to 83 
creating 82, 83 
deleting 83 
finding 83 
modifying 82 

Symbols and Instances 82-84 
breaking links 83 



system (Macintosh) color palette 98 
system (Windows) color palette 98 
system color picker 
canvas 69 
color wells 69 
defining colors using 17, 40 
system requirements for Fireworks 2 



text 

aligning 47 
applying effects 46 
applying stretched alignment 47 
attaching paragraphs to paths 47 
attaching to paths 45 
converting to images 78 
converting to paths 78 
direction 77 
editing 25, 45-47 
importing 92 
range kerning 77 
vertical 77 
text color 

applying using Color Mixer 16 
Text Editor 18, 76—77 
m tutorial 45 
opening 18 

Stretched Alignment button 47 
Text tool 8 

tutorial 45 
texture 73 
thumbnails 

creating during batch processing 104 
TIFF export format 103 
tips 

for tutorials 32 
tool groups 

contents 7 
displaying 7 
tool options 

Freeform tool 42 
Pointer tool 34 
Reshape Area tool 41 
tool options panels 14—18 
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toolbars 

hiding 7 
Info bar 11 
Modify toolbar 11 
Opacity toolbar 12 
showing 7 
URLs toolbar 13,50 
using 7—14 
View Controls 14 
Toolbox 7 

choosing tools m 33 
contents 8—9 
hiding 7 
showing 7 

showing tool groups 7 
tools 44 

Brush tool 40 
Crop tool 37 
Export Area tool 100 
Freeform tool 42 
in Toolbox 8—9 
Magic Wand tool 37 
Paint Bucket 38—39 
Path Scrubber tool 42 
Pen tool 41, 47 
Pointer tool 34 
Polygon Lasso tool 36 
Redraw Path tool 9 
Reshape Area tool 41 
Select Behind tool 35, 43 
Skew tool 47 
Subselection tool 35, 41 
Text tool 45 
Transform tools 65 
transparency 73 

Add to Transparency tool 99 
alpha channel transparency 99, 116 
Convert to Alpha Xtra 87 
fills 84 

m animated GIFs 115 
Index Color transparency 99 
on export 99 

Select Transparency tool 99 
Subtract from Transparency tool 99 
texture 72 

when exporting graphics 99 



Tutorials 

Activating image edit mode 36 
Applying and editing fills 38 
Creating rollovers 48 
fonts used 32 
hiding layers 34, 38 
Linking an image map 50 
Masking objects 43 
opening art files 32 
Reshaping paths 40 
tips for using 32 
Working m object mode 34 
Working with animation 52 
Working with text 45 

u 

Undo 

command 26,33,34 
levels 26 

number of steps 33, 34 
Uniform color palette 98 
uninstalling Fireworks 3 
units of measurement 26 
URL Link pop-up 13 
URL Object Properties dialog box 13 
URL objects 
creating 13 
URL overlay 

changing colors in 108 
hiding 108 
URL Pointer tool 13 
URL pop-up 13 
URL shape tools 13 
URL Slice tool 13 
URLs 

adding to objects 13 
assigning 13 
defined 13 

Image Map Options 13 
Link pop-up 13 
Object Properties 13 
Options pop-up 13 
toolbar 13,108 
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URLs toolbar 

displaying 50 
hiding 108 
options 108 

Show/Hide URLs button 51 



V 

vector art 

defined 6 
importing 27 
vector drawing 56 
Vector File Options 

when importing 93, 94 
Vector File Options dialog box 93, 94 
View Controls toolbar 14 
viewing document 

Full Display or Draft Display 21 
views, multiple 21 



w 

Web 216 palette 97 
Web export formats 101—102 
Web formats compared 102 
WebSnap Adaptive palette 97 
Windows 

Fireworks Preferences file 14 
Fireworks system requirements for 2 
workflow 

How is Fireworks unique? 22—24 
importing and exporting 90 
working with other applications 104 



X 

xRes LRG export format 103 
Xtras 65, 75 

Blur Xtra 65,75 
Invert Xtra 65, 75 
Sharpen Xtra 65, 75 



zooming in 20 
zooming out 20 
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